border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。
1.圆角效果
效果演示:
语法:
1 2 3 |
border-radius: 1-4 length|% / 1-4 length|%; -moz-border-radius:10px;支持旧的firefox -webkit-border-radius:10px;支持chrome |
按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。
例子1:
1 |
border-radius:2px; |
等价于:
1 2 3 4 |
border-top-left-radius:2px; border-top-right-radius:2px; border-bottom-right-radius:2px; border-bottom-left-radius:2px; |
例子2:
1 |
border-radius:2em 1em 4em / 0.5em 3em; |
等价于:
1 2 3 4 |
border-top-left-radius:2em 0.5; border-top-right-radius:1em 3em; border-bottom-right-radius:4em 0.5em; border-bottom-left-radius:1em 3em; |
2.阴影效果
效果演示:
box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
语法:
1 |
box-shadow: h-shadow v-shadow blur spread color inset; |
h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。
例子:
1 |
box-shadow: inset 3px 3px 6px #ccc; |

关注我的微信,获取文章更新
如果你觉得这篇文章对你有用,可以点击下面的“赞助作者”打赏作者!
转载注明原文出处:王柏元的博客>>https://wangbaiyuan.cn/css3-rounded-corners-and-shadow-border-example.html
大神能否发点文学性的东西?
@孤文思枯竭了
这是什么语言
@向某某CSS样式表,你百度一下就知道了