css(2)---倒角阴影 框模型

边框的倒角（圆角）

【将直角倒成圆角】

border-radius:50%

取值     以px为单位的数字

　　　　%       设置圆形(50%)

单角设置：

使用两条边去确认一个角，先写上下后写左右

border-top-left:左上   

border-top-right:右上

border-bottom-left:左下

border-bottom-right:右下

【例子：画柠檬】

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .d1{
            width: 200px;
            height: 200px;
            background: #ff0;
            border-radius: 20px;
            border-top-left-radius: 70%;
            border-bottom-right-radius: 70%;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
</body>
</html>

边框阴影

box-shadow: a b c d color;

a——x轴的偏移量：10px

b——Y轴的偏移量： 10px

c——阴影的模糊距离，可选值，越大模糊距离越明显

d——阴影的尺寸，指定要在基础阴影上扩出的大小

color——阴影颜色；

inset：把默认的外部阴影设置为内部阴影

 

 

 

posted @ 2019-11-21 19:13  Alieen617  阅读(403)  评论(0)  编辑  收藏  举报