Qu'est-ce que l'attribut composite CSS3

En CSS3, les attributs composés sont également appelés « attributs abrégés », qui font référence à des attributs qui peuvent écrire plusieurs codes d'attribut en même temps dans une seule instruction et contrôler plusieurs styles. Par exemple, l'attribut border peut contrôler la largeur de la bordure dans une seule instruction ; déclaration, style de bordure et couleur de bordure.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS3, les attributs composés sont également appelés « attributs abrégés », qui font référence à des attributs qui peuvent définir plusieurs attributs et contrôler plusieurs styles en même temps dans une seule instruction.

Nous savons que l'attribut border peut spécifier à la fois l'épaisseur, la couleur et le type de bordure. Par exemple :

border:2px solid blue;

Les attributs dits composites sont des attributs similaires à la bordure, qui peuvent spécifier plusieurs styles d'un objet avec un seul attribut. Les attributs composites les plus couramment utilisés incluent la police, la bordure, la marge, le remplissage, l'arrière-plan, etc. Bien entendu, ces attributs peuvent également être divisés. Par exemple, l'attribut border peut être divisé en : border-color, border-width et border-style.

Propriétés composites communes CSS

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%

Notez que background-attachment et background-size s'affecteront mutuellementbackground-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;

Notez que certains des attributs animation peuvent être omis directement, comme animation-direction animation- fill-mode animation-play-state, chaque effet d'attribut aura une valeur par défaut, veuillez vous référer au document pour plus de détails

---

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 ne prend pas de place comme le montre l'exemple ci-dessus, <. code>contour sera empilé ensemble

---

border-image

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

Portez une attention particulière à la background-image-slice et coupez-le correctement pour obtenir l'affichage idéal. être invalide

---

transition

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

---

Définir l'image Ensuite, l'attribut type sera Invalid

padding

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

🎜🎜margin🎜🎜rrreee🎜 (Apprendre partage de vidéos : 🎜tutoriel vidéo CSS🎜 )🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!