码迷,mamicode.com
首页 > 编程语言 > 详细

JavaEE——css边框样式

时间:2017-10-09 14:26:36      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:Java

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

边框样式

border属性可以用于控制标签的边框样式,边框的尺寸使用px为单位。
常用的边框的线条样式:
solid 实线
none 无边框线
double 双线
dashed 虚线
代码示例:

image

运行结果:

image

思维导图:

image

边框可以根据上下左右来控制:
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
代码示例:

image

运行结果:

image

思维导图:

image

边框还可以调整四角的弧度:
border-radius 调整边框的弧度,单位可以用px和%
把照片的边框调整成圆形示例:

image

运行结果:

image

调整文本框弧度示例:

image

运行结果:

image

还可以针对四角来调整弧度:
border-bottom-left-radius 调整左下角的弧度
border-bottom-right-radius 调整右下角的弧度
border-top-right-radius 调整右上角的弧度
border-top-left-radius 调整右下角的弧度

代码示例:

image

运行结果:

image

调整组件的阴影:
box-shadow可以调整组件的阴影面积,也可以设置阴影的颜色:
代码示例:

image

运行结果:

image

前两个数值设置为0,就能实现类似光晕的效果: 代码示例:

image

运行结果:

image

图片边框:border-image
使用此属性可以将图片设置到边框上,末尾可以使用round或stretch来定义图片围绕或是拉伸效果。
代码示例:

image

运行结果:

image

代码示例:

image

运行结果:

image

JavaEE——css边框样式

标签:Java

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
凯哥学堂
加入时间:2016-10-07
  关注此人  发短消息
java学习视频下载:www.kaige123.com
凯哥学堂”关注的人------(0
凯哥学堂”的粉丝们------(1
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!