CSS3에서는 복합 속성을 "약어 속성"이라고도 하며, 하나의 명령문에서 동시에 여러 속성 코드를 작성하고 여러 스타일을 제어할 수 있는 속성을 나타냅니다. 예를 들어 테두리 속성은 하나로 테두리 너비를 제어할 수 있습니다. 성명, 테두리 스타일 및 테두리 색상.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS3에서는 복합 속성을 "약칭 속성"이라고도 하며, 하나의 명령문에서 동시에 여러 속성을 설정하고 여러 스타일을 제어할 수 있는 속성을 나타냅니다.
우리는 테두리 속성이 테두리의 두께, 색상, 테두리 유형을 동시에 지정할 수 있다는 것을 알고 있습니다. 예:
border:2px solid blue;
소위 복합 속성은 테두리와 유사한 속성으로, 하나의 속성으로 개체의 여러 스타일을 지정할 수 있습니다. 더 일반적으로 사용되는 복합 속성에는 글꼴, 테두리, 여백, 패딩, 배경 등이 포함됩니다. 물론 이러한 속성은 분할될 수도 있습니다. 예를 들어 테두리 속성은 테두리 색상, 테두리 너비 및 테두리 스타일로 분할될 수 있습니다.
// 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%
background-attachment
와background-size
는 서로 영향을 미칩니다background-attachment
和background-size
会互相影响
// 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: width style color; // border: 宽度 边框类型 边框颜色 border: 2px dashed #000;
// outline: width style color; // outline: 宽度 边框类型 边框颜色 outline: 2px dashed #000;
outline
不占空间,上述示例可看出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: h-shadow v-shadow blur spread color inset; // box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 阴影类型 box-shadow: 2px dashed #000;
animation-direction
animation-과 같은 일부 <code>animation
속성은 직접 생략할 수 있습니다. 채우기 모드 animation-play-state
, 각 속성 효과에는 기본값이 있습니다. 자세한 내용은 문서를 참조하세요// font: style variant weight size/line-height family; // font: 字体样式 字体异体 字体粗细 字体字号/行高 字体系列 font: italic small-caps bold 24px/50px Serif;
// 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
은 위의 예에서 볼 수 있듯이 outline이 함께 쌓이게 됩니다
// transition: property duration timing-function delay; // transition: 过渡属性 过渡时长 过渡效果 过渡延时; transition: width 1s linear 0s;
Background-image-slice
에 특히 주의하세요. code> 속성을 올바르게 잘라서 이상적인 디스플레이를 얻으세요
// padding: 上 右 下 左; // padding: 上 左右 下; // padding: 上下 左右; // padding: 上下左右; padding: 10px 11px 12px 13px; padding: 10px 20px 13px; padding: 10px 20px; padding: 10px;
// margin: 上 右 下 左; // margin: 上 左右 下; // margin: 上下 左右; // margin: 上下左右; margin: 10px 11px 12px 13px; margin: 10px 20px 13px; margin: 10px 20px; margin: 10px;
위 내용은 CSS3 복합 속성이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!