圆角边框border-radius与盒子阴影：如何使用它实现圆等特殊形状？
允许我们设置元素的外边框圆角。当使用一个半径时，确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
对于一个正方形，设置50%，是一个圆。如果宽高不一致，是一个普通距形，出来是一个椭圆。百分比是x、y两个方向上都取百分比。
示例：
代码语言：javascript复制border-radius: 20px 10px 50px 30px;
顺时钟方向控制四角位置：
代码语言：javascript复制 <h1>border-radius的使用</h1>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 20px;
border-radius: 20px 40px;
border-radius: 20px 10px 50px;
border-radius: 20px 10px 50px 30px;
}
</style>border-radius是一个简写样式：
代码语言：javascript复制border-radius: 1em/5em;
/* 等价于：*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;块级盒子阴影：如何使用与文本阴影的相似语法，实现盒子阴影？
曾经用过的文本阴影语法：
代码语言：javascript复制/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;对比盒子阴影语法，在后面加一个扩散半径，与是否内嵌阴影：
代码语言：javascript复制/* 颜色 x偏移量 y偏移量 阴影模糊半径 扩散半径 是否为内嵌阴影 */
box-shadow: red 10px 5px 5px 5px inset;box-shadow目前已经是浏览器全支持，所以不需再添加浏览器前缀了：
代码语言：javascript复制 ul li:hover{
border-color: #dfdfdf;
border-radius: 10px;
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
background-color: #fff;
}多重阴影
代码：
代码语言：javascript复制 <h1>多重阴影与文本阴影</h1>
<style>
.white-with-blue-shadow {
width: 300px;
display: block;
border: 1px solid red;
text-shadow: #01b5b5 2px 2px 2px;
box-shadow: red 10px 5px 5px 5px inset,olive -5px -5px 0.4em 1px;
}
</style>
<p class="white-with-blue-shadow">
Sed ut perspiciatis unde omnis iste natus error.
</p>效果：
【关于作者】
李艺，笔名“石桥码农，腾讯云最具价值专家（TVP），腾讯课堂启明星俱乐部成员，日行一课联合创始人兼 CTO，前 VIPKID 资深技术专家。国内早期闪客之一，具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1：微信全栈工程师一本通》等计算机图书，是极客时间视频畅销课《微信小程序全栈开发实战》的作者，知乎 Live 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。
