零基础跟我学前端之css3基础

Posted tea_year

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零基础跟我学前端之css3基础相关的知识,希望对你有一定的参考价值。

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

```

以上是关于零基础跟我学前端之css3基础的主要内容,如果未能解决你的问题,请参考以下文章

零基础学前端之css3高级特效

零基础学前端之css3高级特效

零基础学前端开发之CSS3深入选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程-css3

零基础学HTML5和CSS3前端开发CSS基础

零基础如何学WEB前端