css3边框、阴影和背景图

sh2001824

于 2022-07-21 16:59:46 发布

阅读量352

点赞数 1

文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/sh2001824/article/details/125915085

版权

本文介绍了CSS3中的border-radius属性用于创建圆角，详细解释了不同数量值的含义；box-shadow属性用于添加盒子阴影，以及其参数设置方法；border-image属性用于用图片创建边框，包括切片、宽度和重复方式；最后讨论了background-image属性在添加背景图时的使用，以及background-origin和background-clip属性对背景图位置和裁剪的影响。

摘要由CSDN通过智能技术生成

1.圆角

在css3中 border-radius属性被用于创建圆角（圆角的4个值、3个值、2个值和1个值分别代表什么）

1：个值我们都知道就是代表4个角
2个值：第一个值代表左上角和右下角第二个值表示右上角和左下角
3个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
4个值：则依次对应左上角、右上角、右下角、左下角（顺时针方向）
如果想要画圆把 border-radius值设置为50%即可
画椭圆加宽度就行

代码如下（除了椭圆其他代码都已注释）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 400px;
            height: 200px;
            /* border-radius: 30px; */
            /*顺序： 左上  右上 右下  左下 */
            /* border-radius: 20px 30px 20px 40px; */
            /*顺序：左上  右上和左下  右下 */
            /* border-radius: 20px 30px 50px; */
            border: 5px solid red;
            /* 椭圆圆角        水平 、垂直*/
            /* border-radius: 40px/80px; */
            /* 画圆 */
            /* border-radius: 50%; */
            /* 画椭圆 加宽度就行*/
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="div1"></div>

</body>

</html>

效果：