1.border-width:边框宽度。
<style>
.div {
border-top-width:1px;
border-right-width:2px
border-bottom-width:3px;
border-left-width:4px;
}
</style>
<body>
<div class="div"></div>
</body>
2.border-color：边框颜色。
<style>
.div {
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:yellow;
}
</style>
<body>
<div class="div"></div>
</body>
3.border-style:边框线样式。
<style>
.div {
border-top-style:solid;
border-right-style:solid;
border-bottom-style:dashed;
border-left-style:dashed;
}
</style>
<body>
<div class="div"></div>
</body>
4.border：边框。
<style>
.div {
width:20px;
height:20px;
border:1px solid red;
}
</style>
<body>
<div class="div"></div>
</body>
5.border-radius:圆角。
<style>
.div {
border-radius:50%;
border-radius:1px 2px 3px 4px;
}
</style>
<body>
<div class="div"></div>
</body>
6.border-image:边框背景图片。
<style>
.div {
border-image:url(‘图片路径‘) no-repeat center center;
}
</style>
<body>
<div class="div"></div>
</body>
7.box-shadow:盒子模型。
<style>
.div {
border-shadow:5px 5px 10px 5px rgba(0,0,255,0.5);
border-shadow:5px 5px 10px 5px rgba(0,0,255,0.5) inset;
}
</style>
<body>
<div class="div"></div>
</body>
8.line-height:行高。
<style>
.div {
width:20px;
height:20px;
line-height:20px
}
</style>
<body>
<div class="div">我是DIV元素</div>
</body>
9.text-indent:段落的首行缩进。
<style>
.div {
text-indent:2em;
}
</style>
<body>
<div class="div">我是DIV标签</div>
</body>
10.text-align:文本的对其方式，属性值：left/right/center/justify。
<style>
.div {
text-align:left;
}
</style>
<body>
<div class="div">我是DIV标签</div>
</body>
11.letter-spacing:文字间距。
<style>
.div {
letter-spacing:5px;
}
</style>
<body>
<div class="div">我是DIV标签</div>
</body>
12.text-overflow:控制文字溢出部分样式。属性值：clip/ellipsis。
<style>
.div {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
<body>
<div class="div">一二三四五六七八九十</div>
</body>
13.word-wrap:断行。属性值：normal/break-word。
<style>
.div {
word-wrap:break-word;
}
</style>
<body>
<div class="div">hahhahahahahhahahahahahahahahahahahahahahahah</div>
</body>
14.background-color:背景颜色。属性值：transparent/color。
<style>
.div {
background:#ccc;
}
</style>
<body>
<div class="div"></div>
</body>
15.rgba:红、绿、蓝、透明度。
<style>
.div {
background:rgba(255,255,255,0.5);
}
</style>
<body>
<div class="div"></div>
</body>
16.linear-gradient:线性渐变。
<style>
.div {
background-image:linear-gradient(to top red 40% blue);
}
</style>
<body>
<div class="div"></div>
</body>
17.background-image:背景图片。
<style>
.div {
background-image:url("图片路径") no-repeat center center;
}
</style>
<body>
<div class="div"></div>
</body>
18.background-repeat:no-repeat/repeat-x/repeat-y。
<style>
.div {
background-repeat:repeat-x;
}
</style>
<body>
<div class="div"></div>
</body>
19.background-position:对齐方式。
<style>
.div {
background-position:left bottom;
}
</style>
<body>
<div class="div"></div>
</body>
20.background:背景。
<style>
.div {
background:url("图片路径") no-repeat center center #ccc;
}
</style>
<body>
<div class="div"></div>
</body>
时间： 2024-10-26 01:34:05