码迷,mamicode.com
首页 > Web开发 > 详细

CSS3的常用属性(二)

时间:2018-02-07 00:48:44      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:属性   指定   简写   form   dia   property   设置图   一个   第一个   

边框

边框圆角

border-radius: 100px 每个角可以设置两个值,x和y

补充: 可分别设置长,短半径,以“/”进行分隔,遵循顺时针的顺序,“/”之前为横轴半径,“/”之后为纵轴半径,如: border-radius: 10px 10px 10px 10px/ 20px 20px 20px 20px

边框阴影

box-shadow: 10px 5px 13px #fff

  • 第一个值为水平偏移量,正值向右,负值向左
  • 第二个值为垂直偏移量,正值向下,负值向上
  • 第三个值为模糊度,不能为负值
  • 第四个值为阴影颜色
    补充:可以设置多个边框阴影,inset可以设置内阴影 如:box-shadow: inset 5px 10px 20px #f52,inset 8px 15px 10px #fff

边框图片

border-image: url(“路径”) 20px 20px round  简写属性

border-image-source: url(“路径”)  设置边框图片的地址

border-image-slice: 20 20  图像边框的向内偏移

border-image-width: 20px  指定边框的宽度

border-image-repeat: repeat平铺 / round铺满 / stretch拉伸

补充: round会自动调整尺寸,完整显示边框图片,而repeat单纯平铺多余的部分,会被剪裁,不能完整显示

 

渐变

线性渐变

linear-gradient: 线性渐变指沿着直线朝一个方向产生渐变效果

background:linear-gradient

to right,  表示方向(如left,right,top,bottom,也可以使用度数,如20deg)

#FFF,  渐变起始颜色

#aaa,  渐变终止颜色

);

径向渐变

radial-gradient: 径向渐变指从一个中心点沿着四周渐变

background: radial-gradient

100px at center,  表示围绕中心渐变。半径为100px,方向可以设置,如at left center,at 0px 0px

#aaa,  渐变起始颜色

#FFF,  渐变终止颜色

注意: 中心点的位置参照的是盒子的左上角,辐射范围可以不等,即可以是椭圆

);

 

背景

background-size: width,height  设置图片的宽度和高度 如:background-size: 100% auto

补充: background-size: cover  自动调整缩放比例,保证图片始终填充满背景区域,如有溢出会被隐藏

    background-size: contain  自动调整缩放比例,保证图片始终完整显示在背景区域

background-origin: 设置背景定位的起点,border-box以边框作为参考原点, padding-box以内边距作为参考原点,content-box以内容区作为参考原点

background-clip: 设置背景区域clip(裁切),border-box裁切边框以内作为背景区域,padding-box裁切内边距以内作为背景区域,content-box裁切内容区作为背景区域

 

过渡

transition: one,two  one为要过渡的属性,two为过渡的时间

transition-property: 设置过渡属性

transition-duration: 设置过渡时间

transition-timing-function: 设置控制速度linear(匀速),ease-in(加速)

transition-delay: 设置过渡延时

 

2D转换

转换可以实现元素的位移,旋转,变形,缩放等,在css3中通过transform(变形)来实现2d或3d转换

  • scale(x,y): 可以对元素进行水平和垂直方向的缩放,x和y取值可为小数,但不能为负数 如 选择器:hover{ transform: scale(10,10);}
  • translate(x,y): 可以改变元素的位置 如 选择器:hover{ transform: translate(-10px,-20px);}
  • rotate(deg): 对元素进行旋转,正值为顺时针,负值为逆时针 如 选择器:hover{ transform: rotate(-200deg);}

注意补充: 属性的作用对各个浏览器不一定有效,所以使用私有化前缀

  • -webkit-: 谷歌,苹果等
  • -moz-: 火狐
  • -ms-: IE
  • -o-: 欧朋

 

CSS3的常用属性(二)

标签:属性   指定   简写   form   dia   property   设置图   一个   第一个   

原文地址:https://www.cnblogs.com/yushangzuiyue/p/8424575.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!