10.10 圆角边框border-radius与盒子阴影：如何使用它实现圆等特殊形状？

LIYI

发布于 2020-10-26 15:50:43

1.4K0

发布于 2020-10-26 15:50:43

文章被收录于专栏：艺述论专栏

圆角边框border-radius与盒子阴影：如何使用它实现圆等特殊形状？

允许我们设置元素的外边框圆角。当使用一个半径时，确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

对于一个正方形，设置50%，是一个圆。如果宽高不一致，是一个普通距形，出来是一个椭圆。百分比是x、y两个方向上都取百分比。

示例：

border-radius: 20px  10px  50px  30px;

顺时钟方向控制四角位置：

    <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是一个简写样式：

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;

块级盒子阴影：如何使用与文本阴影的相似语法，实现盒子阴影？

曾经用过的文本阴影语法：

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

对比盒子阴影语法，在后面加一个扩散半径，与是否内嵌阴影：

/* 颜色 x偏移量 y偏移量 阴影模糊半径 扩散半径 是否为内嵌阴影 */
box-shadow: red 10px 5px 5px 5px inset;

box-shadow目前已经是浏览器全支持，所以不需再添加浏览器前缀了：

        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;
        }

多重阴影

代码：

    <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 讲师，在行互联网技术专家。欢迎到“在行”找我一对一约聊。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除

adobe