CSS3 美化

CSS3圆角

优点:
一、减少网站的维护量
二、提高网站的性能，少了对图片的HTTP请求，网页载入速度加快
三、增加视觉美观性
属性：
（1）border-radius

<style>
        #div1{
            width: 200px;
            height: 50px;
            border: 2px solid red;
            border-radius: 25px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>

border-radius:含义“边框半径”，指定一个值，就是能同时设置四个角的半径（默认值为0，但不可以为负）
border-radius：25px;–>将每个圆角的“水平半径”和“垂直半径”设置为25px
这里写图片描述
（2）指定每个角的半径

<style>
        #div1{
            width: 300px;
            padding: 20px;
            background: red;
            border-radius: 25px;
        }
        #div2{
            width: 300px;
            padding: 20px;
            background: skyblue;
            border-radius: 15px 50px;
        }
        #div3{
            width: 300px;
            padding: 20px;
            background: yellow;
            border-radius: 15px 50px 30px;
        }
        #div4{
            width: 300px;
            padding: 20px;
            background: pink;
            border-radius: 15px 50px 30px 40px;
        }
    </style>
</head>
<body>
<div id="div1">一个值，四个圆角值相同</div>
<br>
<div id="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<br>
<div id="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<br>
<div id="div4">四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div>
<br>
</body>

（3）

 <style>
        #div1{
            width: 200px;
            padding: 20px;
            border: 2px solid;
            background: plum;
            border-top-left-radius: 20px 35px;
            border-top-right-radius: 20px;

            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            /*border-radius: 20px;*/
        }
    </style>
</head>
<body>
<div id="div1"></div>

注意：属性的两个长度第一个是水平半径，第二个是垂直半径，如果第二个值省略，则它是从第一格值复制。（如果任一长度为0，角落是方的，不圆润）

3 CSS3背景

之前学的几个背景属性：
background-color，background-img，background-position，background-repeat

<style>
        body{
            background-image: url("img/timg.jpg");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<p>请看图片,图片是固定的，滑动的是字</p>
<p>请看图片</p>
<p>请看图片</p>
<p>请看图片</p>...</p>
</body>

（1）background-clip：确定背景画区

<style>
      #div1{
         padding: 35px;
         background: pink;
         border: 5px dotted black;
         /*background-clip: border-box;*/
         /*background-clip: padding-box;*/
         background-clip: content-box;
      }
   </style>
</head>
<body>
   <div id="div1">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
      aaaaaaaaaaaaaaaaaaaaaa
   </div>
</body>

background-clip：border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
（2）background-origin：确定背景位置

<style>
      div{
         padding: 25px;
         border: 5px dotted #000000;
         background-image: url("img/timg.jpg");
         background-repeat: no-repeat;
         background-position: left;
      }
      #div1{
         background-origin: padding-box;/*默认值*/
      }
      #div2{
         background-origin: content-box;
      }
      #div3{
         background-origin: border-box;
      }
   </style>
</head>
<body>
   <div id="div1">
      ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
      aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
      ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
   </div><br>
   <div id="div2">
      ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
      aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
      ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
   </div><br>
   <div id="div3">
      ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
      aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
      ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
   </div>
</body>

（3）四个角

<style>
        #div1{
            width: 300px;
            padding: 20px;
            background: red;
            border-radius: 25px;
        }
        #div2{
            width: 300px;
            padding: 20px;
            background: skyblue;
            border-radius: 15px 50px;
        }
        #div3{
            width: 300px;
            padding: 20px;
            background: yellow;
            border-radius: 15px 50px 30px;
        }
        #div4{
            width: 300px;
            padding: 20px;
            background: pink;
            border-radius: 15px 50px 30px 40px;
        }
    </style>
</head>
<body>
<div id="div1">一个值，四个圆角值相同</div>
<br>
<div id="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<br>
<div id="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<br>
<div id="div4">四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div>
<br>
</body>

（4）background-size 背景大小

body{
         background: url("img/dog2.jpg");
         background-size: 80px 60px;
         background-repeat: no-repeat;
         padding-top: 40px;
      }
   </style>
</head>
<body>
   <p>原始图片：<img src="img/dog2.jpg" alt="dog" width="224" height="150"/></p>
</body>

css3以前，背景图像大小由图像的实际大小决定
css3中可以指定背景图片，可以重新指定背景图片的大小，像素或百分比。

（5）伸展图片

<style>
      #div1{
         /*width: 200px;*/
         /*height: 100px;*/
         background: url("img/dog2.jpg");
         background-repeat: no-repeat;
         /*background-size: 100px 100px;*//*给一个值，第二个值为auto*/
         /*background-size: 50% 100%;*//*百分比是相对包含元素的尺寸*/
         /*background-size: contain;*//*缩小图片以适合元素（维持像素长宽比）*/
         background-size: cover;/*缩小图片一填补元素（维持像素长宽比）*/
      }
   </style>
</head>
<body>
   <div id=div1>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>...</p>
   </div>
</body>

background-size: contain 缩小图片以适合元素（维持像素长宽比）以较大的缩放比例为标准。
background-size: cover 扩展元素以填补元素（维持像素长宽比）以较小的缩放比例为标准。
background-size: 100px 100px; 缩小图片至指定的大小设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为”atuo(自动)”
background-size: 50% 100% 缩小图片至指定的大小，百分比是相对包含元素的尺寸

4 CSS3阴影

shadow(阴影)
1.text-shadow:文本阴影
参数:1,在x轴的偏移量,越大越偏右
2,在y轴的偏移量,上为负数,下为正数
3.阴影半径(正值,越大阴影越模糊)
4,代表颜色
text-shadow:
-1px 3px 2px rgba(22,22,22,0.3),
2px 3px 3px red,
2px -3px 2px skyblue,
-2px -3px 2px pink;
分别设置多个阴影的时候用”,”隔开.

动画和文字阴影的结合.

<style>
    .transform{
        width: 300px;
        height: 100px;
        font-size: 45px;
        color: #666;
        animation:active 0.2s infinite alternate;//动画捆绑
    }
    @keyframes active {
        0%{text-shadow: 0 5px 1px gray}
        50%{text-shadow: 0 5px 1px blue}
        100%{text-shadow: 0 5px 1px pink}
    }
</style>

2.box-shadow:是给元素块添加阴影
参数:1,投影方式(可写可不写)
2,x轴的偏移量
3,y轴的偏移量
4,阴影的半径
5,阴影的颜色

.divShadow{
    width: 100px;
    height: 100px;
    margin-left: 50%;
    background-color: #e5ff22;
    box-shadow: inset 2px 3px 2px red;
}

加上inset就是阴影往元素块里显示

5 CSS3倒影（反射）

reflect:反射
1,用法:根据浏览器的兼容性问题,使用box-reflect前需要在前面加上-webkit的前缀

-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));

2,参数:①反射的方向(above/below/left/reght)上下左右(注:设为左右的时候值要大一点才看得见,因为太小了就要做小浏览器页面才能看见)
②倒影和本体的距离,可以为负数
3,其他属性:透明度变化

-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));

gradient:变化率,变化曲线

6 CSS3渐变

渐变为css3新增的属性,分为两种: 线性渐变和径向渐变
1,线性渐变:
1.1,-webkit-gradient(参数多,但是容易调整)
background: -webkit-gradient(linear,0% 0%,100% 0%,from(pink),to(skyblue));
参数:linear: 线性,后面的两组参数代表的是起始位置和终止位置,from(起始的颜色),to(渐变到哪种颜色)

1.2,linear-gradient:

background: linear-gradient(yellow, green);

参数只有起始颜色和终止颜色

background: linear-gradient(yellow, green,blue);

也可以渐变多个颜色

background: linear-gradient(yellow 50%,blue);

在颜色后面加上百分数可以控制颜色开始渐变的位置

1.3,水平渐变(方向为水平方向)

background: -webkit-linear-gradient(right,yellow,blue);

参数为方向,起始颜色,终止颜色

1.4,以角度为方向进行渐变

background: -webkit-linear-gradient(45deg,pink,skyblue);

参数为角度,起始颜色,终止颜色

2,径向渐变:
css3径向渐变就是圆形或者椭圆渐变,不在沿着一条线进行变化,而是从一个起点朝着所有方向渐变,相比于线性渐变,径向渐变要复杂.
1,background:radial-gradient(red,green); 标准语法
2,不均匀变化:

background:radial-gradient(red 30%,green 80%);

参数:在颜色的后面加上百分数可以控制渐变的程度.
3,形状变化:

background: radial-gradient(ellipse,deeppink,plum);//椭圆
background: radial-gradient(circle,deeppink,plum);//圆形

参数: 变化的形状, 起始的颜色变化, 终止的颜色
4.重复变化:

background: repeating-radial-gradient(skyblue 4%,royalblue 20%);

CSS3圆角

优点:
一、减少网站的维护量
二、提高网站的性能，少了对图片的HTTP请求，网页载入速度加快
三、增加视觉美观性
属性：
（1）border-radius

<style>
        #div1{
            width: 200px;
            height: 50px;
            border: 2px solid red;
            border-radius: 25px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>

<style>
        #div1{
            width: 300px;
            padding: 20px;
            background: red;
            border-radius: 25px;
        }
        #div2{
            width: 300px;
            padding: 20px;
            background: skyblue;
            border-radius: 15px 50px;
        }
        #div3{
            width: 300px;
            padding: 20px;
            background: yellow;
            border-radius: 15px 50px 30px;
        }
        #div4{
            width: 300px;
            padding: 20px;
            background: pink;
            border-radius: 15px 50px 30px 40px;
        }
    </style>
</head>
<body>
<div id="div1">一个值，四个圆角值相同</div>
<br>
<div id="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<br>
<div id="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<br>
<div id="div4">四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div>
<br>
</body>

（3）

 <style>
        #div1{
            width: 200px;
            padding: 20px;
            border: 2px solid;
            background: plum;
            border-top-left-radius: 20px 35px;
            border-top-right-radius: 20px;

            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            /*border-radius: 20px;*/
        }
    </style>
</head>
<body>
<div id="div1"></div>

3 CSS3背景

之前学的几个背景属性：
background-color，background-img，background-position，background-repeat

<style>
        body{
            background-image: url("img/timg.jpg");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<p>请看图片,图片是固定的，滑动的是字</p>
<p>请看图片</p>
<p>请看图片</p>
<p>请看图片</p>...</p>
</body>

（1）background-clip：确定背景画区

<style>
      #div1{
         padding: 35px;
         background: pink;
         border: 5px dotted black;
         /*background-clip: border-box;*/
         /*background-clip: padding-box;*/
         background-clip: content-box;
      }
   </style>
</head>
<body>
   <div id="div1">
      aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
      aaaaaaaaaaaaaaaaaaaaaa
   </div>
</body>

background-clip：border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
（2）background-origin：确定背景位置

<style>
      div{
         padding: 25px;
         border: 5px dotted #000000;
         background-image: url("img/timg.jpg");
         background-repeat: no-repeat;
         background-position: left;
      }
      #div1{
         background-origin: padding-box;/*默认值*/
      }
      #div2{
         background-origin: content-box;
      }
      #div3{
         background-origin: border-box;
      }
   </style>
</head>
<body>
   <div id="div1">
      ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
      aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
      ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
   </div><br>
   <div id="div2">
      ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
      aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
      ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
   </div><br>
   <div id="div3">
      ashdkjhjhsjalshbcccccccccccccccshhhhhhhhhhhhhhh<br>
      aaaaaaaaaaaddddddddddkkkkkkkkksssssssssss<br>
      ajjjjjjjjjkwwwwwwwwwwwwwwwwwsssssssss
   </div>
</body>

（3）四个角

<style>
        #div1{
            width: 300px;
            padding: 20px;
            background: red;
            border-radius: 25px;
        }
        #div2{
            width: 300px;
            padding: 20px;
            background: skyblue;
            border-radius: 15px 50px;
        }
        #div3{
            width: 300px;
            padding: 20px;
            background: yellow;
            border-radius: 15px 50px 30px;
        }
        #div4{
            width: 300px;
            padding: 20px;
            background: pink;
            border-radius: 15px 50px 30px 40px;
        }
    </style>
</head>
<body>
<div id="div1">一个值，四个圆角值相同</div>
<br>
<div id="div2">两个值，第一个值为左上角和右下角，第二个值为右上角和左下角</div>
<br>
<div id="div3">三个值，第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角</div>
<br>
<div id="div4">四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角</div>
<br>
</body>

（4）background-size 背景大小

body{
         background: url("img/dog2.jpg");
         background-size: 80px 60px;
         background-repeat: no-repeat;
         padding-top: 40px;
      }
   </style>
</head>
<body>
   <p>原始图片：<img src="img/dog2.jpg" alt="dog" width="224" height="150"/></p>
</body>

css3以前，背景图像大小由图像的实际大小决定
css3中可以指定背景图片，可以重新指定背景图片的大小，像素或百分比。

（5）伸展图片

<style>
      #div1{
         /*width: 200px;*/
         /*height: 100px;*/
         background: url("img/dog2.jpg");
         background-repeat: no-repeat;
         /*background-size: 100px 100px;*//*给一个值，第二个值为auto*/
         /*background-size: 50% 100%;*//*百分比是相对包含元素的尺寸*/
         /*background-size: contain;*//*缩小图片以适合元素（维持像素长宽比）*/
         background-size: cover;/*缩小图片一填补元素（维持像素长宽比）*/
      }
   </style>
</head>
<body>
   <div id=div1>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>
      <p>它是dog</p>...</p>
   </div>
</body>

4 CSS3阴影

动画和文字阴影的结合.

<style>
    .transform{
        width: 300px;
        height: 100px;
        font-size: 45px;
        color: #666;
        animation:active 0.2s infinite alternate;//动画捆绑
    }
    @keyframes active {
        0%{text-shadow: 0 5px 1px gray}
        50%{text-shadow: 0 5px 1px blue}
        100%{text-shadow: 0 5px 1px pink}
    }
</style>

2.box-shadow:是给元素块添加阴影
参数:1,投影方式(可写可不写)
2,x轴的偏移量
3,y轴的偏移量
4,阴影的半径
5,阴影的颜色

.divShadow{
    width: 100px;
    height: 100px;
    margin-left: 50%;
    background-color: #e5ff22;
    box-shadow: inset 2px 3px 2px red;
}

加上inset就是阴影往元素块里显示

5 CSS3倒影（反射）

reflect:反射
1,用法:根据浏览器的兼容性问题,使用box-reflect前需要在前面加上-webkit的前缀

-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));

-webkit-box-reflect: below 10px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));

gradient:变化率,变化曲线

6 CSS3渐变

1.2,linear-gradient:

background: linear-gradient(yellow, green);

参数只有起始颜色和终止颜色

background: linear-gradient(yellow, green,blue);

也可以渐变多个颜色

background: linear-gradient(yellow 50%,blue);

在颜色后面加上百分数可以控制颜色开始渐变的位置

1.3,水平渐变(方向为水平方向)

background: -webkit-linear-gradient(right,yellow,blue);

参数为方向,起始颜色,终止颜色

1.4,以角度为方向进行渐变

background: -webkit-linear-gradient(45deg,pink,skyblue);

参数为角度,起始颜色,终止颜色

background:radial-gradient(red 30%,green 80%);

参数:在颜色的后面加上百分数可以控制渐变的程度.
3,形状变化:

background: radial-gradient(ellipse,deeppink,plum);//椭圆
background: radial-gradient(circle,deeppink,plum);//圆形

参数: 变化的形状, 起始的颜色变化, 终止的颜色
4.重复变化:

background: repeating-radial-gradient(skyblue 4%,royalblue 20%);

CSS3圆角

CSS3圆角

猜你喜欢