css3一些美观的功能属性

来源：互联网发布：美国各州人口密度数据编辑：程序博客网时间：2024/06/06 02:22

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%);

阅读全文

0 0