css3边框阴影的属性(css3 border-radius属性详解)
类别:Web前端 浏览量:2960
时间:2022-01-23 02:06:56 css3边框阴影的属性
css3 border-radius属性详解有什么用?
这个radius属性,可不只是设置圆角,还可以用来画一些简单的图形。
画个圆形
#demo1 { width:100px; height:100px; background:red; border-radius: 50%; }
上述50%就是说设置各边圆角都为50%。
那么如何画个半圆?
如下,把宽度设置为高度的两倍。
#demo2 { width:100px; height:50px; background:green; border-radius: 50px 50px 0 0; }
结果。如图,矩形为100*50 。然后左上角和右上角的圆角分别是50px。因此就是半圆了。
左侧半圆
#demo3 { width:50px; height:100px; background: pink; border-radius: 50px 0 0 50px; }
画半圆了,关键是把握住宽度和高度的比例关系,先画个矩形,然后设置各个方向的圆角就可以了。注意顺序是从左上角开始的顺时针方向。
1/4圆呢?
#demo4 { width:100px; height:100px; background:gray ; border-radius: 100px 0 0 0; }
先画一个正方形,然后设置任意一个圆角为100%就可以。设置哪个角度是100%哪个角度就是弧线。
PS
css里并没有直接画圆的,而是通过圆角实现的,当然你也可以通过canvas来实现。
参考
2.半圆图解CSS3:核心技术与案例实战
标签:border-radiu CSS3
热门推荐
- python中创建类的方法(Python中如何导入类示例详解)
- js中数组的操作
- mysql的默认数据库例子在哪里(修改MySQL8.0 默认的数据目录快捷操作无配置)
- dede网站地图模块(Dedecms中百度网站地图制作的方法图文教程)
- nginx学习需要哪些知识(一篇文章搞懂Nginx是什么,能干什么)
- dedecms权限调整(增加dedecms后台留言管理功能)
- drools机制(Swoole实现异步投递task任务案例详解)
- mysql的null值跟空值(你知道mysql中空值和null值的区别吗)
- dedecms栏目怎么设置(织梦DedeCms实现调用单页文章内容的方法)
- css的字体大全(CSS 常用中文字体 Unicode 编码表)