前缀
由于css3的许多属性在当初还未写入w3c规范,所以,不同的浏览器对其某些属性前面加了不同的前缀,比如border-raidus
-webkit-border-radius: 50%; chrome safari
-ms-border-radius: 50%; ie
-o-border-radius: 50%; opera
-moz-border-radius: 50%; firfox
写一个半圆
div {
width: 100px;
height: 50px;
background-color: red;
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
}
也可以填写具体的像素值,如
border-top-right-radius: 50% 30px;
一片叶子
div {
height: 100px;
width: 80px;
background-color: green;
border-top-left-radius: 70% 100%;
border-top-right-radius: 30% 30%;
border-bottom-right-radius: 100% 70%;
}
像素值也可以是相对单位em,em是相对父级font-size的单位,浏览器默认的font-size是16px(即1em = 16px),也可以修改父级的font-size的值来改变em的大小
box-shadow
box-shadow: 20px 20px 5px 10px #333;
像素值分别是:x轴偏移量,y轴偏移量,模糊半径,扩展半径,颜色;通过改变前两项的正负值来改变阴影的方位 。还有一个值是可加在最后---inset,向内部投影。
写一个带阴影的小按钮
.demo1{
height: 40px;
width: 100px;
border-radius: 20px;
box-shadow: 0px 0px 5px 0px #333;
}
text-shadow
text-shadow: 10px 10px 3px grey;
参数分别是x-offset,y-offset,blur,color
颜色值RGBA
ext-shadow: 10px 10px 3px rgba(255, 0, 0, 0.5);
渐变色
线性渐变
background: linear-gradient(to bottom, #fff 0%, red 50%, #000 100%)
第一个值可以填“to top”,“to top right”等等方向,后面的属性值都为颜色+百分比
background: linear-gradient(0deg, #fff 0%, red 50%, #000 100%)
第二种方式填写角度,0度的效果类似于to top, 180度相当于to bottom
径向渐变
background: radial-gradient(circle 50px at 50px 30px, #fff 0%, red 30%, #000 100%)
第一个参数的意思是,圆形,渐变半径50px,渐变中心位于(50,30)的位置
注意:渐变中心有一个关键字center表示正中心,此外,如果中心点只写一个值,那么另一个值默认是50%
background: radial-gradient(ellipse 50px 30px at 50% 50% , #fff 0%, red 30%, #000 100%)
另一种椭圆的渐变,只是原来半径的位置变成了横轴和纵轴,
注意:我们渐变最后一个值可以写成trnasparent,表示透明色
word-wrap
看下面的代码
.demo1{
height: 100px;
width: 100px;
background: red;
/* word-wrap: break-word; */
}
<div class="demo1">fffffffffffffffffffffffffffffff</div>
虽然我们给div设置了宽高但是,这里会默认这一串f是一个单词,所以这里不会行,把注释处取消,就可以实现换行
font-face
我们可以使用网上的一些字体www.w3cplus.com/content/css…,引入的方式就是在样式里面添加如下代码,这里引入的字体样式是strawberry
@font-face{
font-family: "straw";
src: url("Strawberry Blossom.ttf");
}
然后我们就可以在后面的样式中使用这个字体
.demo1{
height: 100px;
width: 100px;
background: red;
word-wrap: break-word;
font-family: "straw";
}
border-image
border-image: url("pic1.jpg") 20 stretch;
导入图片边框,第一个参数是图片的链接,第二个参数是在图片的四角裁取边长20px的正方形做边框的四角,stretch参数是将四个正方形中间的部分进行拉伸,repeat是将四角中间的部分进行重复,从中间向两侧铺满边框,如果长度不为整数倍那么图片会被截断,round也是是将中间的图片平铺到边框,不过如果边框中间部分不是图片中间部分的整数倍,那么会将图片中间部分缩放平铺,而不是截断;
background-origin
通常背景图片都是从盒模型的padding处引入,如:
.demo1{
height: 100px;
width: 100px;
background: url("pic1.jpg") no-repeat;
border: 20px solid rgba(255, 0, 0, 0.5);
margin: 40px;
}
想要从别处引入背景图片可以使用此样式
background-origin: border-box; 从border处引入
background-origin: content-box; 从content处引入
background-clip
我们发现引入背景图片从 padding开始的话,右边和下方的border是会有图片的,此方法可以裁剪背景图片,根据不同的属性值,会有不同的效果,默认值是no-clip
background-clip: padding-box;
background-clip: content-box;
background-clip: border-box;
在文字中填充图片效果
background-image: url("pic1.jpg");
background-repeat: no-repeat;
background-color: yellow;
background-clip: border-box;
text-fill-color: -webkit-background-clip;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size
控制背景图片大小,有五个属性:
auto:默认值,不改变图片
长度值:200px 200px 分别为宽和高的设置,当设置一个值时宽度为当前值,高等比缩放
百分比:50% 50% 宽高的百分比,当设置一个值时同上
cover:一张图片铺满背景,如果比例不符则截断图片
contain:尽量让背景内保存一张完整的图片
background-position
前端经常用到的雪碧图来展示小图标,比如豆瓣的评分星数,就使用position方法来改变背景图片展示的位置得以实现
div {
height: 15px;
width: 50px;
border: 3px solid black;
background-image: url(pic1.jpg);
background-repeat: no-repeat;
background-position: 0 -15px; x轴 y轴
}
css3常用的属性选择器
参考www.w3school.com.cn/cssref/css_…