B2-CSS3应用

最新推荐文章于 2024-09-27 10:44:38 发布

Leona__

最新推荐文章于 2024-09-27 10:44:38 发布

阅读量77

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/Leona__/article/details/119677532

版权

边框

圆角
语法：
----属性 border-radius:***;
----值 px/%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            border-radius: 25px;
            background-color: aquamarine;
        }
        .div2{
            width: 200px;
            height: 200px;
            border-radius: 25%;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

上述代码样式如下（不同浏览器会有所区别）：
在这里插入图片描述
边界图片
语法：
----属性 border-image:***;
----值
url(图片路径)
宽度
样式（拉伸stretch/重复repeat/平铺round）

盒子阴影
语法：
----属性 box-shadow:***;
----值
水平阴影 h-shadow
垂直阴影 v-shadow
模糊距离 blur
阴影尺寸 spread
阴影颜色 color
外部阴影转为内部 inset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            box-shadow: 5px 5px 2px grey;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

上述代码样式如下（不同浏览器会有所区别）：

文本

文本阴影
语法：
----属性 text-shadow:***;
----值同box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 20px;
            color: rgb(235, 151, 25);
            font-weight: bold;
            text-shadow:5px 5px 3px rgb(173, 173, 173);
        }
    </style>
</head>
<body>
    <div>
        这里是带text-shadow效果的字体
    </div>
</body>
</html>

上述代码样式如下（不同浏览器会有所区别）：
在这里插入图片描述
自动换行
语法：
----属性 word-wrap:***;
----值 normal/break-word

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            width: 100px;
            background-color: aquamarine;
        }
        .p2{
            width: 100px;
            background-color: rgb(255, 127, 197);
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <p class="p1">this is a long worddddddddddddddddddddddddd</p>
    <p class="p2">this is a long worddddddddddddddddddddddddd</p>
</body>
</html>

上述代码样式如下（不同浏览器会有所区别）：
在这里插入图片描述

背景

背景图片设置
background-size:xpx ypx;----设置背景图片的大小
background-origin:border-box/padding-box/content-box;----设置背景图片的定位区域
background-clip:border-box/padding-box/content-box;----设置背景图片绘制区域

颜色渐变
线性渐变：
background:linear-gradient(to ***,color1,…,colorN n%);
径向渐变：
background:radial-gradient(~~circle ,~~ color1,…,colorN);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            margin: 10px;
        }
        .d1{
            background: linear-gradient(to top right,rgb(202, 124, 202) ,rgb(151, 212, 171) );
        }
        .d2{
            background: linear-gradient(to top right,rgb(202, 124, 202) ,rgb(151, 212, 171) 30%);
        }
        .d3{
            background: radial-gradient(rgb(223, 224, 162),rgb(171, 210, 255));
        }
        .d4{
            background: radial-gradient(circle,rgb(223, 224, 162),rgb(171, 210, 255));
        }
    </style>
</head>
<body>
    1
    <div class="d1"></div>
    2
    <div class="d2"></div>
    3
    <div class="d3"></div>
    4
    <div class="d4"></div>
</body>
</html>