零基础跟我学前端之css3基础-CFANZ编程社区

css3基础

1、本章目标

掌握CSS3设置边框、背景、文本效果

理解并会使用CSS3自定义字体

2、CSS3边框

border-radius 用于创建圆角
border-image 使用图片创建边框
box-shadow 用来添加阴影

border-radius属性

四个值：左上角，右上角，右下角，左下角

三个值：左上角, 右上角和左下角，右下角

两个值：左上角与右下角，右上角与左下角

一个值：四个圆角值相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>border-radius</title>

    <style>
        div{
            width: 400px;
            height: 200px;
            margin: 30px auto;
            background-color: rgb(241, 194, 194);
            text-align: center;
            line-height: 200px;
        }
        .a{
            border-radius: 20px;
        }
        .b{
            border-radius: 10px 50px;
        }
        .c{
            border-radius: 10px 50px 0px;
        }
        .d{
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
       <!--  border-radius属性

        四个值 ：左上角，右上角，右下角，左下角
        三个值：左上角, 右上角和左下角，右下角
        两个值：左上角与右下角，右上角与左下角  对角线
        一个值 ：四个圆角值相同 -->

        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
        <div class="d">d</div>
</body>
</html>

border-radius 8个值顺序：

.e{
            border-radius: 10px 20px 30px 40px/40px 30px 20px 10px;
        }

p {
  width: 100%;
  height: 50%;
  background: lightgreen;
  border-radius: 100% 50%/ 0 100%;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dvIduY4W-1629980842687)(/assetis/image-20210325000539132.png)]

border-image属性

值	说明
border-image-source	边框图片的路径
border-image-slice	图片边框向内偏移 num / % / fill
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量
border-image-repeat	图像是否应该平铺(repeat)、铺满(round)或拉伸(stretch)。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e8Cqr2pO-1629980842691)(/assetis/image-20210325002321790.png)]

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

<head>
    <meta charset="UTF-8">

    <title>Document</title>

    <style>
        .box {
            margin: 50px auto;
            width: 300px;
            height: 300px;
            border: 1px solid;
            background-color: rgb(252, 225, 225);
            /* border-image-source  边框图片的路径                       */
            border-image-source: url(./img/border.png);
            /* border-image-slice   图片边框向内偏移 num / % / fill */
            border-image-slice: 30;
            /* border-image-width   图片边框的宽度*/
            border-image-width: 30px;
            /* border-image-outset  边框图像区域超出边框的量*/
            border-image-outset: 0px; ;
            /* border-image-repeat  图像是否应该平铺(repeat)、铺满(round)或拉伸(stretch)*/
            border-image-repeat: round;

            border-image: url(/i/border_image_button.png) 0 14 0 14 stretch
        }
    </style>
</head>

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

</html>

3、box-shadow属性

值	说明
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸外延值
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MfXxBY34-1629980842693)(/assetis/image-20210325003241903.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid #999;


            /* h-shadow 必需，水平阴影的位置，允许负值
            v-shadow    必需，垂直阴影的位置，允许负值
            blur    可选，模糊距离
            spread  可选，阴影的尺寸  外延值
            color   可选，阴影的颜色
            inset   可选，将外部阴影（outset）改为内部阴影 */
            box-shadow: 10px 20px 5px 20px rgb(173, 156, 134) ;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

4、CSS3背景

background-size 规定背景图片的尺寸

background-origin 规定背景图片的定位区域，即以哪个位置为参考

background-clip 规定背景的绘制区域

background-size属性

值	说明
length（单位：像素）	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
percentage（百分比）	以父元素的百分比来设置背景图像的宽度和高度。。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

语法：

//background-size:100px;
//background-size:100%;
//background-size:cover;
background-size:contain;

background-origin/clip属性:

background-origin 属性规定 background-position 属性相对于什么位置来定位

background-clip 属性规定背景的绘制区域

值	background-origin值说明	background-clip值说明
padding-box	背景图像相对于内边距框来定位	背景被裁剪到内边距框
border-box	背景图像相对于边框盒来定位	背景被裁剪到边框盒
content-box	背景图像相对于内容框来定位	背景被裁剪到内容框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MHGji9hb-1629980842696)(/assetis/image-20210325004838901.png)]

<!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>
        div{
            width: 300px;
            height: 300px;
            margin: 50px auto;
            border:30px solid rgba(0, 0, 0, .5);

            background: url(./img/bj.jpg) no-repeat;

            background-size: 200px;
            padding: 50px;
            background-origin:content-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5、CSS3渐变

线性渐变—Linear Gradients

语法：background: linear-gradient(direction, color-stop1, color-stop2, …);

径向渐变—Radial Gradients

语法：background: radial-gradient(center, shape size, start-color, …, last-color);

注意：渐变的值一定要找ui拿

https://www.runoob.com/css3/css3-gradients.html

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div {
            width: 400px;
            height: 200px;
            /* background-image: linear-gradient(90deg,pink,yellow); */
            /* background-image: linear-gradient(to left,pink,yellow); */
            /* background-image: linear-gradient(to left, pink 70%, yellow); */
            /* background-image: linear-gradient(to left, pink 70%, yellow); */
            /* background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, .5)); */
            background-image: radial-gradient(red 5%, yellow 15%, green 60%);

        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

6、CSS3文本效果

text-shadow

向文本添加阴影：h-shadow v-shadow blur color

h-shadow：水平方向偏移量

v-shadow：垂直方向偏移量

blur: 模糊度

color:颜色

h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        h1{
            font-size: 80px;
            font-weight: 900;
            text-shadow: 11px 9px 5px #675;
        }
    </style>
</head>
<body>
    <h1>I LOVE YOU</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S8wJwwQY-1629980842698)(/assetis/image-20210325011918812.png)]

7、text-overflow 属性

超出部分显示省略号

white-space:nowrap 文本不会换行，在同一行继续

overflow:hidden 溢出隐藏

text-overflow:ellipsis 用省略号来代表被修剪的文本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BOwP5J7T-1629980842701)(/assetis/image-20210325012737102.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 50px;
            border: 3px solid #999;
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;


        }
    </style>
</head>
<body>
    <div>jdjdjdjjddddddddddddddddddddddddddddddddddddddddddddddd</div>
</body>
</html>

8、CSS3字体

@font-face {
          font-family: 必需。规定字体的名称
          src: 必需。定义字体文件的 URL
       }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFYNixpQ-1629980842702)(/assetis/image-20210325013634762.png)]

<!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>
        /* @font-face {
          font-family: 必需。规定字体的名称
          src: 必需。定义字体文件的 URL
       } */
       @font-face {
          font-family: 'my_font';
          src:url(./fonts/shimesone_personal-webfont.eot);
          src:url(./fonts/shimesone_personal-webfont.svg);
          src:url(./fonts/shimesone_personal-webfont.ttf);
          src:url(./fonts/shimesone_personal-webfont.woff);
       }

       h1{
           font-family: 'my_font';
       }

    </style>
</head>
<body>
    <h1>hello every body</h1>
</body>
</html>

} */

@font-face {

font-family: ‘my_font’;

src:url(./fonts/shimesone_personal-webfont.eot);

src:url(./fonts/shimesone_personal-webfont.svg);

src:url(./fonts/shimesone_personal-webfont.ttf);

src:url(./fonts/shimesone_personal-webfont.woff);

}

h1{
       font-family: 'my_font';
   }

</style>

hello every body

```