Apakah atribut komposit css3

Dalam CSS3, atribut majmuk juga dipanggil "atribut ringkas", yang merujuk kepada atribut yang boleh menulis berbilang kod atribut pada masa yang sama dan mengawal berbilang gaya dalam satu pernyataan, contohnya, atribut sempadan boleh digunakan dalam satu pernyataan Kawal lebar sempadan, gaya sempadan dan warna sempadan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS3, atribut majmuk juga dipanggil "atribut ringkas", yang merujuk kepada atribut yang boleh menetapkan berbilang atribut dan mengawal berbilang gaya pada masa yang sama dalam satu pernyataan.

Kami tahu bahawa atribut sempadan boleh menentukan ketebalan, warna dan jenis sempadan sempadan pada masa yang sama. Contohnya:

border:2px solid blue;

Atribut komposit yang dipanggil ialah atribut yang serupa dengan sempadan, yang boleh menentukan berbilang gaya objek dengan satu atribut. Atribut komposit yang lebih biasa digunakan termasuk fon, sempadan, jidar, padding, latar belakang, dsb. Sudah tentu, atribut ini juga boleh dibahagikan Contohnya, atribut sempadan boleh dibahagikan kepada: warna sempadan, lebar sempadan dan gaya sempadan.

Atribut komposit biasa CSS

latar belakang

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

Perhatikan bahawa background-attachment dan background-size akan mempengaruhi satu sama lain

animasi

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

Perhatikan bahawa beberapa atribut animation boleh ditinggalkan secara langsung, seperti animation-direction animation-fill-mode animation-play-state, setiap kesan atribut akan mempunyai nilai lalai Untuk butiran, sila rujuk dokumen

sempadan

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

garis besar

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

outline tidak mengambil ruang Seperti yang dapat dilihat daripada contoh di atas, outline akan dilapis bersama

imej sempadan

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

Beri perhatian pada atribut background-image-slice dan potong dengan betul untuk mendapatkan paparan yang ideal

bayang-kotak

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

gaya senarai

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

Selepas menetapkan imej, atribut jenis akan menjadi tidak sah

peralihan

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

Selepas menetapkan imej, atribut jenis akan menjadi tidak sah

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;

(Perkongsian video pembelajaran: tutorial video css)

Atas ialah kandungan terperinci Apakah atribut komposit css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!