ホームページ >ウェブフロントエンド >フロントエンドQ&A >css3複合属性とは何ですか
css3複合属性とは何ですか
- 青灯夜游オリジナル
- 2021-12-14 17:10:255285ブラウズ
CSS3 では、複合属性は「短縮属性」とも呼ばれ、複数の属性コードを同時に記述し、1 つのステートメントで複数のスタイルを制御できる属性を指します。たとえば、border 属性を使用できます。 1 つのステートメントで、境界線の幅、境界線のスタイル、境界線の色を制御します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 では、複合プロパティは「短縮プロパティ」とも呼ばれ、1 つのステートメントで複数のプロパティを設定し、複数のスタイルを制御できるプロパティを指します。
border 属性では、境界線の太さ、色、境界線の種類を同時に指定できることがわかりました。例:
border:2px solid blue;
いわゆる複合属性は、border に似た属性で、1 つの属性でオブジェクトの複数のスタイルを指定できます。より一般的に使用される複合属性には、フォント、境界線、マージン、パディング、背景などが含まれます。もちろん、これらの属性は分割することもでき、たとえば、border 属性は、border-color、border-width、border-style に分割できます。
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%
Note
background-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;
Note
animation一部の属性は次のようになります。animation-directionanimation-fill-modeanimation-play-stateのように省略した場合、各属性効果はデフォルト値となります。ドキュメントを参照してください
#border// border: width style color;
// border: 宽度 边框类型 边框颜色
border: 2px dashed #000;
#outline
// outline: width style color;
// outline: 宽度 边框类型 边框颜色
outline: 2px dashed #000;
outline##border- imageスペースを占有しません。上の例からわかるように、
outlineは一緒に積み重ねられます
// 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プロパティに注意してください。正しくカットすることによってのみ、理想的な表示を得ることができますbox-shadow
// 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;
#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);
画像設定後は type 属性が無効になります
transition
// transition: property duration timing-function delay;
// transition: 过渡属性 过渡时长 过渡效果 过渡延时；
transition: width 1s linear 0s;
設定後画像の場合、type 属性は無効になります
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;
（学習ビデオ共有: css ビデオチュートリアル
）以上がcss3複合属性とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。