边框样式、段落样式、背景样式

最新推荐文章于 2019-09-04 22:38:34 发布

转载最新推荐文章于 2019-09-04 22:38:34 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dadayang/p/5762861.html

本文详细介绍了CSS中边框样式的设置方法，包括边框宽度、颜色、样式等属性，以及背景样式的设置，如背景颜色、背景图片、渐变色等，并提供了具体的示例代码。

边框样式：

1. border-width

边框宽度：

div { width:200px; height:200px; border-style:solid; border-width:5px; ｝

/*border-top-width      设置上边框宽度
  border-bottom-width    设置下边框宽度
  border-left-width  　  设置左边框宽度
  border-right-width     设置右边框宽度*/

2. border-color

边框颜色:

div { width:200px; height:200px; border-style:solid; border-width:5px; border-color:red;｝

/*border-top-color       设置上边框颜色

  border-bottom-color   设置下边框颜色

  border-left-color  　  设置左边框颜色

 border-right-color  设置右边框颜色*/

3. border-style

边框线：

div { width:300px; height:100px; border-style:solid; ｝

边框线属性值有：

none（无轮廓）

hidden（隐藏边框。IE7及以下尚不支持）

dotted（点状轮廓。IE6下显示为dashed效果）

dashed（虚线轮廓）

solid（实线轮廓）

double（双线轮廓）

groove（3D凹槽轮廓）

ridge （3D凸槽轮廓）

inset（3D凹边轮廓）

outset（3D凸边轮廓）

4. border

边框：

可以将以上面三个样式border-width 、border-style 、 border-color 缩写：

div {
    width:200px; 
    height:200px; 
    border:1px solid #FF0000;
}

5. border-radius

圆角：

/* 所有角都使用半径为10px的圆角 */ 
div{ border-radius:10px;}  

/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 
div{ border-radius: 5px 4px 3px 2px; }
    
/*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/
div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

/*圆*/
div{ border-radius:50% }

/*半圆*/

　 div{
　　width: 200px;
　　height: 100px;
　　border-style: solid;
　　border-color:red;
　　border-width:5px;
　　border-radius: 100px 100px 0 0 ;
　　}

半圆效果如下：

6. border-image

边框图片：

 div { border: 10px solid gray; border-image: url(1.png) 10/10px; }

/*

<' border-image-source '>：设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>：设置或检索对象的边框背景图的分割方式。
<' border-image-width '>：设置或检索对象的边框厚度。
<' border-image-outset '>：设置或检索对象的边框背景图的扩展。
<' border-image-repeat '>：设置或检索对象的边框图像的平铺方式。

*/

7. box-shadow（盒子阴影）

使用方法：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

.outset { box-shadow: 5px 5px rgba(0, 0, 0, .6); }                /*外阴影常规效果*/

.outset-blur{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6); }/*外阴影模糊外延效果*/

. inset { box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset; }   /*内阴影效果*/

段落样式：

1. line-height（行高）

p { line-height:25px;}
p { line-height:150%}

2. text-indent（段落缩进）

p { text-indent:2em;} /*首行缩进个2个字符*/

3. text-align：

p { text-align:right;}

p { text-align:center;}

属性值有：

left（内容左对齐）
center（内容居中对齐）

right （内容右对齐）

justify （内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。）

4. letter-spacing（文字间距）

p { letter-spacing:5px;}/*每个文字与文字之间的距离是5px*/

5. text-overflow（文字溢出）

text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

div,input{
    overflow: hidden;    /*条件1：超出部分隐藏*/
    white-space: nowrap;/*条件2：强制在同一行内显示所有文本*/
    text-overflow: ellipsis;/*超出部分显示。。。*/
}

6. word-wrap（段落换行）

normal　　　　　　　允许内容顶开或溢出指定的容器边界。

break-word 　　　　内容将在边界内换行。如果需要，单词内部允许断行。

p {
                word-wrap: break-word;
            }

背景样式：

1. background-color（背景颜色）

body { background-color:#CCCCCC;}

2. 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之间，不可为负值。

border-color:rgba(255 , 0 , 0 , .7);    /*.7是alpha透明度为70%的意思*/

background-color:rgba( 100 , 120 , 60 , .5 );

border-color:rgba(255 , 0 , 0 , .7);

3. linear-gradient（渐变色彩）

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。

W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

background-image:linear-gradient(to left, red 30%,blue);

4. background-image（背景图片）

body { background-image:url(images/bg.gif);}

5. background-repeat（背景平铺方式）

body { background-repeat:no-repeat;}/*背景图像不平铺*/

属性值：

repeat-x：背景图像在横向上平铺

repeat-y：背景图像在纵向上平铺

repeat：背景图像在横向和纵向平铺

no-repeat：背景图像不平铺

round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）

space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）

6. background-position（背景定位）

body { background-position:left bottom;}

body { background-position:30% 20px;}

7. background

背景样式缩写

.nav {
         background:#red url(images/icon.jpg) no-repeat left 0px; 
　　　　　　　　/*背景颜色为红色，要定位的背景图像的路径，背景图像不平铺，定位在左边然后上边为0px的位子。*/ 
}

转载于:https://www.cnblogs.com/dadayang/p/5762861.html