Shulou(Shulou.com)06/02 Report--

This article will explain in detail what the compound attribute in css3 means. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

In css3, composite attributes are also called "shorthand attributes", which refer to attributes that can be coded in multiple attributes and control multiple styles in a single declaration; for example, the border attribute can control border width, border style, and border color in a single declaration.

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

In css3, composite attributes are also called "shorthand attributes" and refer to attributes that can be set simultaneously in a single declaration to control multiple styles.

We know that the border property specifies both the thickness, color, and border type of the border. For example:

border:2px solid blue;

A composite attribute is an attribute like border that specifies multiple styles of an object. Common composite attributes include font, border, margin, padding and background. 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-imagebackground-repeat background-attachment background-position/background-size// background: background color picture address whether repeated whether fixed positioning/picture size background: #fff url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2657596156,4172056089&fm=26&gp=0.jpg) no-repeat fixed 0 0/100%

Note that background-attachment and background-size affect each other

animation// animation: name duration timing-function delay iteration-count direction fill-mode play-state;// animation: animation name animation duration animation function delay time animation number animation direction animation state animation running or pausing animation: move 5s linear 0s infinite alternate both running;

Note that some of the animation attributes can be omitted directly, such as animation-direction animation-fill-mode animation-play-state, each attribute effect will have a default value, see the documentation for details.

border// border: width style color;// border: Width border type border color border: 2px dashed #000;outline// outline: width style color;// outline: width border type border color outline: 2px dashed #000;

outline takes up no space, as you can see in the example above, outline will stack together

border-image// border-image: source slice width outline repeat;// border-image: picture path offset border width image area excess border picture repeat type border-image: url(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;

Pay attention to the background-image-slice attribute, the correct cut to get the ideal display

box-shadow// box-shadow: h-shadow v-shadow blur spread color inset;// box-shadow: horizontal shadow vertical shadow blur distance shadow size shadow color shadow type box-shadow: 2px dashed #000;font// font: style variant weight size/line-height family;// font: font style font variant font weight font size/line-height font family font: italic small-caps bold 24px/50px Serif;list-style/ list-style: type position image;// list-style: Tag Type Tag Location Tag Image;list-style:lower-roman inside;list-style: inside url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=167525435,1152422064&fm=26&gp=0.jpg);

After setting the picture, the type attribute will be invalid

transition// transition: property duration timing-function delay;// transition: transition property transition duration transition effect transition delay;transition: width 1s linear 0s;

After setting the picture, the type attribute will be invalid

padding// padding: upper right, lower left;// padding: Up, left, right, down;// padding: Up and down, left and right;// padding: Up and down, left and right; padding: 10px 11px 12px 13px;padding: 10 px 20px 13px;padding: 10 px;margin// margin: top right bottom left;// margin: top left right bottom;// margin: top left right;// margin: top left right;margin: 10px 11px 12px 13 px; margin: 10 px 20 px; margin: 10 px; About "what is the meaning of compound attributes in css3" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.