- 在编写CSS3样式时，不同的浏览器需要的前缀如下：
| 前缀 |
浏览器 |
| -webkit |
chrome和safari |
| -moz |
firefox |
| -ms |
IE |
| -o |
opera |
-
border-radius：向元素添加圆角边框。
- 使用方法：
border-radius:10px;
/* 所有角都使用半径为10px的圆角 */
border-radius: 5px 4px 3px 2px;
/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
-
border-radius的值可以用px单位、百分比或em。
- 绘制一个
实心上半圆：
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
-
box-shadow是向盒子添加阴影，支持添加一个或者多个。
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
| 值 |
描述 |
| X轴偏移量 |
必需。水平阴影的位置。允许负值。 |
| Y轴偏移量 |
必需。垂直阴影的位置。允许负值。 |
| 阴影模糊半径 |
可选。模糊距离。 |
| 阴影扩展半径 |
可选。阴影的尺寸。 |
| 阴影颜色 |
可选。阴影的颜色。省略默认为黑色。 |
| 投影方式 |
可选。（设置inset时为内部阴影方式，若省略为外阴影方式） |
- 注意：
inset可以写在参数的第一个或最后一个，其它位置是无效的。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>测试7</title>
<!-- <link rel="stylesheet" type="text/css" href="style04.css"> -->
<style type="text/css" media="screen">
.box_shadow1 {
/*相对原位置的x轴偏移量、y轴偏移量，阴影模糊半径，阴影颜色*/
box-shadow: 4px 2px 5px #333333;
height: 100px;
width: 100px;
}
.box_shadow2 {
/*最后一个参数设置内部阴影方式*/
box-shadow: 4px 2px 6px #333333 inset;
height: 100px;
width: 100px;
}
.box_shadow3 {
/*添加多个阴影只需用逗号隔开*/
box-shadow: 4px 2px 6px #f00,
-4px -2px 6px #000,
0px 0px 12px 5px #33CC00 inset;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="box_shadow1"></div>
这是外阴影效果！
<div class="box_shadow2"></div>
这是内阴影效果！
<div class="box_shadow3"></div>
这是多个阴影效果！
</body>
</html>
效果展示
1、阴影模糊半径与阴影扩展半径的区别：
- 阴影模糊半径：此参数可选，其值
只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
- 阴影扩展半径：此参数可选，其值可以是
正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。
2、X轴偏移量和Y轴偏移量值可以设置为负数：
- X轴偏移量为负数：
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:-4px 4px 6px #666;
}
X轴值为负数
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px -4px 6px #666;
}
Y轴值为负数
- 为边框应用背景图片
border-image：其和background属性比较相似：background: url(图片绝对/相对路径) 10px 20px no-repeat;
-
border-image-source: url(图片绝对/相对路径)：边框背景图片，也可以不使用背景图片：border-image: none;
-
border-image-slice: top right bottom left;（参数为顺时针：上右下左）：图片边框向内偏移的距离，即裁剪位置。该距离接受数值，百分数。默认数值的单位是像素(px)，但是不能在数值后面加px，否则这句css将不被浏览器解析！举个栗子：设置裁剪百分数：border-image-slice: 30% 35% 40% 30%。由图可知，裁剪完之后图片形成九宫格。边框图片被切割成9部分，以一一对应的关系放到div边框的九宫格中，然后再压缩（或拉伸）至边框（border-width或border-image-width）的宽度大小。
-
border-image-repeat: repeat（平铺）/round（铺满）/stretch（拉伸）（重复性）：参数0~2个，0个参数表示使用默认值 – stretch；1个参数表示水平方向及垂直方向均使用设置的参数；2个参数：第一个参数表示水平方向，第二个参数表示垂直方向。
裁剪位置
- 注意：在
border-image中，角边框图片是没有任何展示效果，即不会平铺，不会重复，也不会拉伸！
设置repeat
设置round
设置stretch
设置repeat
设置round
设置stretch
CSS3颜色之RGBA
- RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及
相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法：color：rgba(R,G,B,A);
- 以上R、G、B三个参数，
正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。举个例子：
<p style="background-color: rgba(0, 0, 0, 0.9); ">设置背景颜色的透明度为0.9</p>
<p style="background-color: rgba(0, 0, 0, 0.5); ">设置背景颜色的透明度为0.5</p>
设置背景透明度
-
颜色渐变：CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里只针对线性渐变的 W3C 标准语法来分析其用法，W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。
线性渐变
- 参数描述：
1、第一个参数指定渐变方向，可以用角度的关键词或英文短语来表示。若省略此参数，则默认为180deg，等同于to bottom。
2、第二个和第三个参数：表示颜色的起始点和结束点，可以有多个颜色值。至少2种颜色！
-
径向渐变：设置形状，其值为 circle（圆形） 或 ellipse（椭圆形）。默认值是ellipse。尺寸大小有4个值：closest-side、farthest-side、closest-corner、farthest-corner。
<p style="background: radial-gradient(circle, #f00,#ff0,#0f0); text-align: center;">径向渐变，可以设置形状、尺寸大小，但不能设置渐变方向，否则浏览器不能解析！</p>
<p style="background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); text-align: center;">线性渐变，可以设置渐变方向</p>
渐变效果展示
| 用角度表示 |
用英文表示 |
作用 |
| 0deg |
to top |
从下向上 |
| 90deg |
to right |
从左向右 |
| 180deg |
to bottom |
从上向下 |
| 270deg |
to left |
从右向左 |
| - |
to top left |
从右下角到左上角 |
| - |
to top right |
从左下角到右上角 |
CSS3文字与字体
-
text-overflow：用来设置是否使用一个省略标记...标示对象内文本的溢出。语法：
text-overflow: clip | ellipsis;
/*
clip：表示剪切；
ellipsis：表示显示省略标记。
*/
- 但text-overflow只是用来说明文字溢出时
用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space: nowrap）及溢出内容为隐藏（overflow: hidden），代码如下：
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/*
normal为浏览器默认值；
break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
*/
word-wrap: normal | break-word;
-
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。
.test {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: #ccc;
}
<div class="test">
超酷的IT技术学习平台（我是省略号）
</div>
文字溢出时显示为省略号
-
嵌入字体@font-face：@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法：
@font-face {
font-family : "My Font"/*（字体名称）*/;
src : url("字体文件在服务器上的相对或绝对路径");
}
- 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。举个例子：
p {
font-size :12px;
font-family : "My Font";
/*必须项，设置@font-face中font-family同样的值*/
}
-
text-shadow可以用来设置文本的阴影效果。语法：
text-shadow: X-Offset Y-Offset blur color;
1、X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
2、Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
3、Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
4、Color：是指阴影的颜色，其可以使用rgba色。
.test {
width: 340px;
padding: 30px;
font: bold 55px/100% "微软雅黑";
background: #C5DFF8;
text-shadow: 2px 2px 0px red;
}
<div class="test">Love </div>
设置文本阴影
网友评论