这篇文章将为大家详细讲解有关css3中复合属性是什么意思，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在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。
CSS 常用复合属性
background
// background: background-color background-image
background-repeat background-attachment background-position/background-size
// background: 背景色 图片地址 是否重复 是否固定 定位/图片尺寸
background: #fff url(/file/upload/202210/19/1rayd3t0e1p.jpg) no-repeat fixed 0 0/100%注意
background-attachment和background-size会互相影响
animation
// 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
// border: width style color;
// border: 宽度 边框类型 边框颜色
border: 2px dashed #000;outline
// outline: width style color;
// outline: 宽度 边框类型 边框颜色
outline: 2px dashed #000;
outline不占空间，上述示例可看出outline会层叠在一起
border-image
// 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
// box-shadow: h-shadow v-shadow blur spread color inset;
// box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 阴影类型
box-shadow: 2px dashed #000;font
// font: style variant weight size/line-height family;
// font: 字体样式 字体异体 字体粗细 字体字号/行高 字体系列
font: italic small-caps bold 24px/50px Serif;list-style
// list-style: type position image;
// list-style: 标记类型 标记位置 标记图像；
list-style:lower-roman inside;
list-style: inside url(/file/upload/202210/19/wqi5yso0jf1.jpg);设置图片之后，类型属性将失效
transition
// transition: property duration timing-function delay;
// transition: 过渡属性 过渡时长 过渡效果 过渡延时；
transition: width 1s linear 0s;设置图片之后，类型属性将失效
padding
// padding: 上 右 下 左；
// padding: 上 左右 下；
// padding: 上下 左右；
// padding: 上下左右；
padding: 10px 11px 12px 13px;
padding: 10px 20px 13px;
padding: 10px 20px;
padding: 10px;margin
// margin: 上 右 下 左；
// margin: 上 左右 下；
// margin: 上下 左右；
// margin: 上下左右；
margin: 10px 11px 12px 13px;
margin: 10px 20px 13px;
margin: 10px 20px;
margin: 10px;关于“css3中复合属性是什么意思”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
