CSS——圆角边框和阴影一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。圆

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

圆角边框

border-radius属性的值通常为px单位，表示圆角的半径
单独设置四个圆角，从前往后依次表示左上，右上，右下，左下

<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
          width:400px;
          height:400px;
          border:10px solid #00d8ff;
          border-radius:400px 300px 200px 100px;     100px:左上，右下  20px:右上，左下*/
         /* border-radius:400px 300px 200px 100px;   /* 顺时针排序 400px:左上，300px：右上，200px：右下 100px：左下*/
        }
    </style>
</bead>
<body>
<div></div>
</body>
</html>

效果图

在这里插入图片描述

圆和半圆

当border-radius的四个属性值相同就可以表示一个圆出来；

如：border-radius:400px;

border-radius只赋值两个属性，其他两个属性为0，可以表示半圆；

如： border-radius:400px 400px 0 0;

还可以给图片设置一个border-radius属性，让图片成圆形，就像头像一样。

使用实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
          width:400px;
          height:200px;
          border:10px solid #00d8ff;
          /*border-radius:400px; 圆形*/
          border-radius:400px 400px 0 0; /*半圆形*/
        }
        img{
           border-radius:200px ;
        }
    </style>
</head>
<body>
<div></div>
<img src="images/4.jpg" alt="">
</body>
</html>

效果图

在这里插入图片描述

阴影

使用box-shadow属性可以给元素块添加周边阴影效果。

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:x轴阴影段长度，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:y轴阴影段长度，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

如：box-shadow:10px 10px 100px red ;
第一个参数是阴影水平偏移量
第二个参数是阴影垂直偏移量
第三个参数是往四周阴影段长度
第四个参数是阴影段颜色

<!DOCTYPE html>
<html lang="en">
<bead>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    #text{
          width:200px;
          height:200px;
          border:10px solid #00d8ff;
          box-shadow:10px 10px 100px red ;
          margin:0 auto;  /*居中*/

        }
         
        img{
          box-shadow:10px 10px 100px red ;
          border-radius:200px;

        }
    </style>
</bead>
<body>
<div style="width:1000px;height:200px;display:block; text-align:center;">  /*让图片居中*/
    <img src="images/4.jpg" alt="">
</div>

<div id="text"></div>
</body>
</html>