Was ist ein zusammengesetztes CSS3-Attribut?

In CSS3 werden zusammengesetzte Attribute auch als „abgekürzte Attribute“ bezeichnet. Sie beziehen sich auf Attribute, die mehrere Attributcodes gleichzeitig in einer Anweisung schreiben und mehrere Stile steuern können. Beispielsweise kann das Randattribut die Rahmenbreite in einem steuern Aussage, Randstil und Randfarbe.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS3 werden zusammengesetzte Attribute auch „Kurzattribute“ genannt, die sich auf Attribute beziehen, die mehrere Attribute festlegen und mehrere Stile gleichzeitig in einer Anweisung steuern können.

Wir wissen, dass das Randattribut gleichzeitig die Dicke, Farbe und den Randtyp des Randes angeben kann. Zum Beispiel:

border:2px solid blue;

Die sogenannten zusammengesetzten Attribute sind rahmenähnliche Attribute, die mit einem Attribut mehrere Stile eines Objekts angeben können. Zu den am häufigsten verwendeten zusammengesetzten Attributen gehören Schriftart, Rahmen, Rand, Abstand, Hintergrund usw. Natürlich können diese Attribute auch aufgeteilt werden: Das Randattribut kann beispielsweise in „Rahmenfarbe“, „Rahmenbreite“ und „Rahmenstil“ unterteilt werden.

Gemeinsame zusammengesetzte CSS-Eigenschaften

Hintergrund

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

Beachten Sie, dass background-attachment und background-size sich gegenseitig beeinflussenbackground-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-direction animation-fill-mode animation-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

---

animation

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

Beachten Sie, dass einige der animation-Attribute direkt weggelassen werden können, wie z. B. animation-direction animation- Füllmodus animation-play-state, jeder Attributeffekt hat einen Standardwert, Einzelheiten finden Sie im Dokument

---

border

---

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

outline

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

outline nimmt keinen Platz ein, outline wird zusammengestapelt

---

border-image

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

Achten Sie besonders auf den background-image-slice Code> Attribut und schneiden Sie es richtig aus, um die ideale Anzeige zu erhalten ungültig sein <p> (Lernvideo-Sharing: </p>CSS-Video-Tutorial

)

---

Das obige ist der detaillierte Inhalt vonWas ist ein zusammengesetztes CSS3-Attribut?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!