What is css3 composite attribute

In CSS3, compound attributes are also called "abbreviated attributes", which refer to attributes that can write multiple attribute codes at the same time and control multiple styles in one statement; for example, the border attribute can be used in one statement. Control the border width, border style and border color.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS3, compound properties are also called "shorthand properties", which refer to properties that can set multiple properties and control multiple styles in one statement.

We know that the border attribute can specify the thickness, color and border type of the border at the same time. For example:

border:2px solid blue;

The so-called composite attribute is an attribute similar to border, which can specify multiple styles of an object with one attribute. The more commonly used composite attributes include font, border, margin, padding, background, etc. Of course, these attributes can also be split. For example, the border attribute can be split into: border-color, border-width and border-style.

CSS common composite properties

background

// 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%

Notebackground-attachment and background-size Will affect each other

animation

// animation: name duration timing-function delay iteration-count direction fill-mode play-state;
// animation: 动画名称 动画时长 动画函数 延迟时间 动画次数 动画方向 动画状态 动画运行或者暂停
animation: move 5s linear 0s infinite alternate both running;

NoteanimationSome of the attributes can be directly If omitted, such as animation-direction animation-fill-mode animation-play-state, each attribute effect will have a default value. For details, please refer to the document

border

// border: width style color;
// border: 宽度 边框类型 边框颜色
border: 2px dashed #000;

outline

// outline: width style color;
// outline: 宽度 边框类型 边框颜色
outline: 2px dashed #000;

outlineDoes not take up space. As can be seen from the above example, outline will be stacked together

##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;

Copy after login

Pay attention to the

background-image-sliceproperties. Only by cutting correctly can you get the ideal display

box-shadow

// box-shadow: h-shadow v-shadow blur spread color inset;
// box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 阴影类型
box-shadow: 2px dashed #000;

Copy after login

font

// font: style variant weight size/line-height family;
// font: 字体样式 字体异体 字体粗细 字体字号/行高 字体系列
font: italic small-caps bold 24px/50px Serif;

Copy after login

list-style

// 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);

Copy after login

After setting the image, the type attribute will be invalid

transition

// transition: property duration timing-function delay;
// transition: 过渡属性 过渡时长 过渡效果 过渡延时；
transition: width 1s linear 0s;

Copy after login

After setting the image, the type attribute will be invalid

padding

// padding: 上 右 下 左；
// padding: 上 左右 下；
// padding: 上下 左右；
// padding: 上下左右；
padding: 10px 11px 12px 13px;
padding: 10px 20px 13px;
padding: 10px 20px;
padding: 10px;

Copy after login

margin

// margin: 上 右 下 左；
// margin: 上 左右 下；
// margin: 上下 左右；
// margin: 上下左右；
margin: 10px 11px 12px 13px;
margin: 10px 20px 13px;
margin: 10px 20px;
margin: 10px;

Copy after login

（Learning video sharing:

css video tutorial）

The above is the detailed content of What is css3 composite attribute. For more information, please follow other related articles on the PHP Chinese website!