广州开发网站技术支持,私域直播平台有哪些,做跨境电商网站报价,企业网站手机版CSS新特性#xff08;2-2#xff09; 前言box相关box-shadow background背景rgba颜色与透明度transform:rotate(Xdeg) 2D旋转transform:tranlate 平移 前言
本文继续讲解CSS3其他的新特性#xff0c;想看之前新特性点击这里#xff0c;那么好本文正式开始。
box相关
box… CSS新特性2-2 前言box相关box-shadow background背景rgba颜色与透明度transform:rotate(Xdeg) 2D旋转transform:tranlate 平移 前言
本文继续讲解CSS3其他的新特性想看之前新特性点击这里那么好本文正式开始。
box相关
box-shadow
CSS3新增了边框阴影效果一共四个属性值可以控制想要控制的块边框阴影颜色、程度以及方向。 四个属性时x偏移量y偏移量阴影模糊半径阴影颜色 三个属性三个x偏移量y偏移量阴影颜色 设置insert属性insert属性为向边框内展示阴影。 同时也可以通过来设置多个阴影。
举例
!DOCTYPE html
html
headstyle.normal{width:100px;height:100px;background-color:red;box-shadow:10px 10px blue,inset 10px 10px pink; }.normal2{width:100px;height:100px;background-color:red;box-shadow:10px 10px 5px gray;}/style
/head
bodydiv classnormal/divbrbrdiv classnormal2/div/body
/htmlbackground背景
新增了几个背景属性分别为 background-clip:确定背景所在区域可以从边框、内容、内边距、默认四个方向进行选取。 background-origin:确定背景图片的对齐区域到底在哪里默认都是左对齐但是根据content内容左对齐还是内容内边距左对齐可以通过该属性设置。 background-size:控制背景图片的尺寸大小。 backgroundlinear属性可以设置线性渐变如上下两个颜色渐变左右两个颜色渐变默认为上下渐变。
举例
!DOCTYPE html
html
headstyle.normal{width:100px;height:100px;background:linear-gradient(to right,#ccc,#000)}/style
/head
bodydiv classnormal/divbrbr/body
/htmlrgba颜色与透明度
可以设置三个颜色属性这些颜色属性可以是0-255数字也可以是0-100%百分比最后一个属性为透明度。 举例
!DOCTYPE html
html
headstyle.normal{width:100px;height:100px;background: rgb(31 ,120 ,50);}/style
/head
bodydiv classnormal/divbrbr/body
/htmltransform:rotate(Xdeg) 2D旋转
可以转换一个2D的块单位是deg可以是否正负值来进行方向的转换。 举例
!DOCTYPE html
html
headstyle.normal{width:100px;height:100px;border:1px solid gray;transform: rotate(100deg);}/style
/head
bodydiv classnormal/divbrbr/body
/htmltransform:tranlate 平移
可以使用translate属性进行平移向左或者向右移动单位是px。
举例
!DOCTYPE html
html
headstyle.normal{width:100px;height:100px;border:1px solid gray;transform: translate(100px);}/style
/head
bodydiv classnormal/divbrbr/body
/html使用前 使用后
