css3-边框 阴影 渐变 背景 文本效果

css3-边框  阴影   渐变   背景   文本效果

边框

CSS3 圆角边框（border-radius ）

border-radius: 10px 20px 30px 40px;
四个值：左上/右上/右下/左下
border-radius: 10px 30px 40px;
三个值: 左上/右上左下/右下
border-radius: 10px 40px;
两个值:左上右下/右上左下 
border-radius: 50%;
border-bottom-left-radius:50% ;

阴影

box-shadow: h-shadow  v-shadow  blur  spread  color  inset;

 

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

例：
多个阴影：box-shadow: 10px 10px 5px #888888, inset 3px 3px 5px #f00;
注：有多个阴影须用逗号分隔继续写

渐变

线性渐变  linear-gradient()

重复的线性渐变  repeating-linear-gradient()

background-image: linear-gradient(45deg,#ff0000,#ffff00,#0000ff); /*线性渐变*/

径向渐变  radial-gradient()

background-image: radial-gradient(circle,#f00,#ff0,#0f0,#00f);/*径向渐变*/

背景

 

background: url(img/01.jpg) no-repeat;

background-clip规定背景的绘制区域

/*content-box 从内容区域部分绘制背景*/
/*border-box 从边框(不包含边框)区域部分绘制背景*/
/*padding-box 从内边距部分开始绘制背景*/

 

background-origin规定背景图片的定位区域

 

background-size规定背景图片的尺寸

/*cover 填充满盒子，但是有可能超出盒子*/
/*contain 按照一定的比例去填充盒子，不会超出盒子*/

文本效果

文本阴影    text-shadow: -5px -5px 20px red;

添加文字描边  -webkit-text-stroke: 3px red; 

 

强制单词换行   word-wrap: break-word;

/*下面三行出现省略号，注意只能是单行文本*/
overflow: hidden;
white-space: nowrap;

/*normal 默认*/
/*nowrap 不换行*/

text-overflow: ellipsis;