首页 > Web开发 > 详细

CSS样式-边框border-*

时间:2021-02-21 23:46:17      阅读:28      评论:0      收藏:0      [点我收藏+]

边框宽度:

border-width

边框样式:

border-style:none,solid,dashed,dotted

边框颜色:

border-color

圆角:

border-radius,单位可以是百分比,也可以是px

举例:border-radius:50%; border-radius:20px;

/*练习:画圆圈*/

border: 125px solid #000;

border-radius: 100%;

border-right-color: #f00;

/* 一次性的设定方法:四种 */
border: 20px solid #000;
/* 以border-width为例*/
/* 第一种:上右下左全部改成 40px */
/* border-width: 40px; 
/* 第二种,上下40px,左右20px */
/* border-width: 40px 20px; */
/* 第三种,上80px,下40px,左右 20px */
/* border-width: 80px 20px 40px; */
/* 第四种,上80px, 右20px, 下40px, 左10px */
border-width: 80px 20px 40px 10px;

连写模式:

宽度 样式 颜色

举例: border: 1px solid #f00;

边框共四条边,顺序分别是 top right bottom left

 

/练习:其他边都是5px,solid,黑色,只有右边是红色*/
border: 5px solid #000;

/*border-right: 5px solid #f00;*/

border-right-color: #f00;

CSS样式-边框border-*

原文:https://www.cnblogs.com/Friday1/p/14426839.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!