在css3中，複合屬性又稱“簡寫屬性”，指的是可以在一個聲明中同時書寫多個屬性代碼、控制多種樣式的屬性；例如border屬性，就可以在一個聲明中控制邊框寬度、邊框樣式和邊框顏色。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css3中，複合屬性又稱“簡寫屬性”，指的是可以在一個聲明中同時設定多個屬性、控制多種樣式的屬性。
我們知道border屬性可以同時規定邊框的粗細、顏色和邊框類型。例如:
border:2px solid blue;
所謂複合屬性就是類似border這樣的屬性，能夠一個屬性規定物件的多種樣式。比較常用的複合屬性有font、border、margin、padding和background等。當然這些屬性也是可以拆分的，例如border屬性就可以拆分為：border-color、border-width和border-style。
// background: background-color background-image background-repeat background-attachment background-position/background-size // background: 背景色 图片地址 是否重复 是否固定 定位/图片尺寸 background: #fff url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2657596156,4172056089&fm=26&gp=0.jpg) no-repeat fixed 0 0/100%
注意
background-attachment和background-size會互相影響
// animation: name duration timing-function delay iteration-count direction fill-mode play-state; // animation: 动画名称 动画时长 动画函数 延迟时间 动画次数 动画方向 动画状态 动画运行或者暂停 animation: move 5s linear 0s infinite alternate both running;
注意
animation屬性裡有一些是可以直接省略的，例如animation-directionanimation-fill-modeanimation-play-state，每個屬性效果都會有預設值，詳細可參考文件
// border: width style color; // border: 宽度 边框类型 边框颜色 border: 2px dashed #000;
// outline: width style color; // outline: 宽度 边框类型 边框颜色 outline: 2px dashed #000;
outline不佔空間，上述範例可看出outline會層疊在一起
// border-image: source slice width outset repeat; // border-image: 图片路径 偏移 边框宽度 图像区域超出的量 边框图片重复类型 border-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576497337284&di=26ef95dbb3b7e1a4766732e6f95f1e8d&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F39%2F06%2F4556d5b0a022b0a.jpg) 100 100 100 100 round;
專注於注意
background-image-slice屬性，正確切割才能得到理想顯示
// box-shadow: h-shadow v-shadow blur spread color inset; // box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 阴影类型 box-shadow: 2px dashed #000;
// font: style variant weight size/line-height family; // font: 字体样式 字体异体 字体粗细 字体字号/行高 字体系列 font: italic small-caps bold 24px/50px Serif;
// list-style: type position image; // list-style: 标记类型 标记位置 标记图像； list-style:lower-roman inside; list-style: inside url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=167525435,1152422064&fm=26&gp=0.jpg);
設定圖片之後，類型屬性將會失效
// transition: property duration timing-function delay; // transition: 过渡属性 过渡时长 过渡效果 过渡延时； transition: width 1s linear 0s;
#設定圖片之後，類型屬性將失效
// padding: 上 右 下 左； // padding: 上 左右 下； // padding: 上下 左右； // padding: 上下左右； padding: 10px 11px 12px 13px; padding: 10px 20px 13px; padding: 10px 20px; padding: 10px;
// margin: 上 右 下 左； // margin: 上 左右 下； // margin: 上下 左右； // margin: 上下左右； margin: 10px 11px 12px 13px; margin: 10px 20px 13px; margin: 10px 20px; margin: 10px;
以上是css3複合屬性是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
