06. 更个性的边框

CSS3新增了三种边框属性:

  • border-radius:圆角边框
  • border-shadow:边框阴影
  • border-image:图片边框

6.1 圆角边框


最基本的用法:设置四个相同弧度的圆角:

div{
    border: 1px solid;
    border-radius: 5px;
    -moz-border-radius: 5px;    /*支持旧版firefox*/
    -webkit-border-radius: 5px; /*支持旧版webkit核心浏览器*/
}

可以使用百分比作为单位:根据边的长度百分比进行调整;
设置不同弧度的圆角:

div{
    border: 1px solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

6.2 边框阴影


严格来说,box-shadow跟边框并没有什么关系,即使不设置边框也可以设置box-shadow。

div{
    box-shadow: color h-shadow v-shadow blur spread color inset;
/*  color: 可选,阴影颜色
    h-shadow: 必选,水平阴影的位置,允许负值
    v-shadow: 必选,垂直阴影的位置,允许负值
    blur: 可选,模糊距离
    spread: 可选,阴影的尺寸
    inset: 可选,外阴影改为内阴影
*/
}

和边框不同,阴影是不占据空间的

6.3 图片边框


连IE10都不支持的渣渣,opera需要-o-支持

div{
    border-image-source: url();
    border-image-slice: [ number | percentage]; /*number只是数字,不可以加单位,默认单位是px*/
    border-image-width: number;    /*规定了图片边框的宽度*/
    border-image-outset: number;    /*规定了图片边框外延的距离,默认是0,即图片边框在元素内部*/
    border-image-repeat: repeat/round/sketch;
}

6.4 通过resize属性来改变输入框的大小


目前只有webkit核心的浏览器才支持这个属性;

textarea{
    resize: none;    /*用户无法调整元素尺寸*/
    resize: both;    /*用户可以同时调整元素宽高*/
    resize: horizontal;
    resize: vertical;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 2,294评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,657评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,805评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 2,057评论 0 2