边框：
1.边框圆角：border-radius;
只设置一个数值时
border-radius:xxpx;
设置一个数值效果图.png
边框的四个圆角像素都为xx;
设置两个数值：
border-radius:apx bpx;
对应关系：
top-left与bottom-right对应的圆角边框像素为a；
top-right与bottom-left对应的圆角边框像素为b;
设置两个数值效果图.png
当设置的数值为三个时
第一个数值对应：top-left;
第二个数值对应：top-right和bottom-left;
第三个数值对应：bottom-right;
2.边框阴影：box-shadow;
对应代码：
box-shadow:h-shadow v-shadow blur spread color inset;
| 属性 | 是非为必须 | 可选数值 |
|---|---|---|
| h-shadow | 必须 | 水平阴影的位置 （xxpx） |
| v-shadow | 必须 | 垂直阴影的位置(xxpx) |
| blur | 可选 | 模糊距离(xxpx,数值越大越模糊) |
| spread | 可选 | 阴影的尺寸（数字） |
| color | 可选 | 对应颜色的16进制数值或英文 |
| inset | 可选 | inset(内部阴影)/outset（外部阴影） |
eg
div{
width:200px;
height:100px;
box-shadow:20px 20px 10px red;
}
对应效果图.png
背景：
背景图案尺寸：background-size;
background-size:length/percentage/cover/contain;
| 属性 | 可选数值 |
|---|---|
| length | 用长度定义图片的大小（xxpx） |
| percentage | 用百分比定义图片大小（xx%） |
| cover | 将图片等比缩放到完全覆盖容器（容器：div之类）,背景有可能超出容器大小 |
| contain | 将背景图片等比缩放到宽度或高度与容器的宽度或高度相等，背景始终在容器里面 |
示例代码：
<style type="text/css">
body{
padding-top:130px;
background:url(背景墙.jpg);
background-size:200px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>缩小后的图片</p>
<p>原始图片:<img src="背景墙.jpg" ></p>
效果图.png
文本：
1.文本阴影：text-shadow;
text-shadow:h-shadow v-shadow blur color;
数值表格参考边框阴影表格。
示例代码：
<style type="text/css">
h1{
text-shadow:8px 8px 6px #ff0000;
}
</style>
</head>
<body>
<h1>文本阴影效果</h1>
</body>
效果图.png
2.强制换行：word-wrap;
word-wrap:normal/break-word;
normal:只在允许的断字点换行
break-word:在长单词或URL地址内部进行换行。
3.文本溢出：text-overflow;(要与overflow:hidden和white-space:nowrap。连用)
text-overflow:clip/ellipsis;
clip:文本溢出时，将溢出的部分裁掉；
ellipsis:溢出部分用省略号表示；
代码示例：
<style type="text/css">
.d{
text-overflow:clip;
width:224px;
overflow:hidden;
white-space:nowrap;
}
p.b{
text-overflow:ellipsis;
width:224px;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<h2>text-overflow:clip;</h2>
<div class="d">不显示省略标记，而是简单裁剪掉</div>
<h2>text-overflow:ellipsis;</h2>
<p class="b">显示省略标记，而不是简单裁剪掉</p>
</body>
效果图.png
4.文字描边：text-stroke;(要加-webkit前缀。)
-webkit-text-stroke:xxpx(宽度) color(颜色)；
示例代码：
<style type="text/css">
.a{
-webkit-text-stroke:1px #f00;
}
</style>
</head>
<body>
<div class="a">文本颜色填充</div>
</body>
效果图.png
5.文本颜色填充：text-fill-color(要加-webkit前缀。)
-webkit-text-fill-color:color；
<style type="text/css">
.a{
-webkit-text-fill-color:red;
</style>
</head>
<body>
<div class="a">文本颜色填充</div>
</body>
效果图.png
PS：4与5差不多，第四点比第五点多一个可以增加文字粗细的操作。
网友评论