CSS3: 常用属性

最新推荐文章于 2020-01-09 16:37:59 发布

星辰大海_enoch

最新推荐文章于 2020-01-09 16:37:59 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666557

border-radius 圆角

一个值/四个值/每个值拆分成两个方向值

box-shadow 盒子阴影/（性能杀手）

box-shadow: x y [模糊半径] [阴影拓展半径] [阴影颜色] [投影方式]

text-shadow 文字阴影 /（性能杀手）

text-shadow: x y [模糊半径] [阴影颜色]

rgba(r, g, b, a)

注意与opacity的区别

opacity与rgba中的a区别:

opacity下面的元素会继承opacity属性；

rgba中的a仅自己使用。

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>常用属性</title>
    <style>
 button {
 width: 50px;
 height: 50px;
 text-align: center;
 line-height: 50px;
 color: #fff;
 background: orange;
 border-radius: 20px 15px 40px 30px;
 box-shadow: 10px 5px 3px #ffc773;
        }
 p {
 text-shadow: 10px 5px 3px #0eb83a;
        }
    </style>
</head>
<body>
    <button>btn</button>
    <p>不交学费</p>
</body>
</html>

线性渐变

background:linear-gradient(direction, color [percent], color [percent]) 属性值参数详解如下：

direction //渐变方向

写方向：to bottom/to bottom right……

写角度：0deg/45deg

color //渐变颜色

percent // 百分比

径向渐变

background:radial-gradient(shape r/(a,b) at position, color [percent], color [percent]) 属性值参数详解如下：

shape //形状

circle/ellipse

r/(a,b) // 半径/(长短轴)

position //中心点位置

像素值/百分比/方向(top left)/也可以是一个值，第二个值默认center

*transparent透明

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>常用属性</title>
    <style>
 .box {
 width: 400px;
 height: 400px;
 border: 1px solid #000;
 background: linear-gradient(45deg, #ff8c31, #ffb3a7);
        }
 .circle {
 width: 200px;
 height: 200px;
 /* border: 1px solid #000; */
 border-radius: 50%;
 background: radial-gradient(circle 100px at 100px 100px, #c93756 35%, #f47983, transparent)
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="circle">
    </div>
</body>
</html>