css3常用小结

2018-04-29 本文已影响0人矮萌杰

边框：
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（外部阴影）

    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差不多，第四点比第五点多一个可以增加文字粗细的操作。

css3常用小结

猜你喜欢

热点阅读