济南达内IT培训
美国上市IT培训机构

17156168575

热门课程

济南达内:CSS常用样式

  • 时间:2016-08-12
  • 发布:济南达内
  • 来源:济南达内

一、边框属性

1、border:复合属性。设置对象边框的特性。

取值:

border-width: 设置或检索对象边框宽度。

border-style: 设置或检索对象边框样式。

border-color: 设置或检索对象边框颜色。

#border4

{

width: 100px;

height: 100px;

border:1px solid #FF0000;

}

2、border-width:设置对象的边框宽度。

取值:

meadium: 定义默认厚度的边框

thin: 定义比默认厚度细的边框。

thick: 定义比默认厚度粗的边框。

★ 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

如果只提供一个,将用于全部的四边。

如果提供两个,第一个用于上、下,第二个用于左、右。

如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

也可以分别对四边设置边框:

border-top-width 设置上边框宽度

border-bottom-width 设置下边框宽度

border-left-width 设置左边框宽度

border-right-width 设置右边框宽度

3、border-color:设置或检索对象的边框颜色

取值:

(1)英文单词的颜色,如“blue”、“red”

(2)十六进制值,如“#ffffff”、“#ff0000”

(3)rgba、rgb,如rgba(0,0,0,.5)、rgb(255,255,255)

4、border-style:设置对象的边框样式

取值:

none:无轮廓。border-color与border-width将被忽略

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

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

dashed:虚线轮廓。

solid: 实线轮廓。

double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

可以对四边分别设置其边框样式:

#border3

{

width: 200px;

height: 100px;

border: solid;

border-top-style:dotted ;

border-left-style:dashed ;

border-right-style: double;

border-bottom-style: solid;

}

5、border-radius:设置对象使用圆角边框

水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

如果只提供一个,将用于全部的于四个角。

如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

取值

length:用长度值设置对象的圆角半径长度。不允许负值

percentage:用百分比设置对象的圆角半径长度。不允许负值

CSS代码

#yj{

background-color:indianred ;

width: 100px;

height: 100px;

border-radius: 10px 10px 20px 20px;

}

上一篇:网络营销的渠道有哪些?
下一篇:济南达内Java培训学习经验

马上预约七天免费体验课

姓名:

电话:

达内教育集团受邀出席甘肃白银矿冶职业技术学院2019年新春话职教中高职院校联系交流会活动

达内携手衢州学院成立“TI联盟”,培养多元化IT人才!

韩少云:坚守长期价值,帮达内学员高质量就业

网络推广中出现的问题(2)

选择城市和中心
江西省

贵州省

广西省

海南省

达内教育

有位老师想和您聊一聊