border使用

Posted webyun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了border使用相关的知识,希望对你有一定的参考价值。

border属性 border-width  border-style  border-color  inherit

border-style的值:none  dotted(点线)  dashed(虚线)  solid(实线) double(双线)  groove(凹槽)  ridge(凸起)  inset outset   inherit

div {
    border: 1px solid #ff0000;
}
div {
    border-bottom: 1px solid #ff0000;
}

 

CSS3新增的有border-radius  box-shadow  border-image

border-radius可以用em、px、%来指定圆角大小  也可以四个角单独指定

div {
    border-radius: 50%;
}
div {
    border-top-left-radius:2em;
    border-top-right-radius:2em;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;
}

box-shadow  水平阴影  垂直阴影  阴影长度  阴影颜色

div {
    box-shadow: 10px 10px 5px #ff0000;
}

border-image 请参阅 http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image

以上是关于border使用的主要内容,如果未能解决你的问题,请参考以下文章

css border-radius片段

CSS可视化工具-助力快速开发css片段

CSS可视化工具-助力快速开发css片段

怎么在js中挂马

图片展示js特效

微信小程序代码片段