好看的css边框样式,好看的div边框样式

CSS border（边框）样式写法总结

border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。

语法：border： border-width | border-style | border-color;

border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。

 border-top-width：设置元素上边框宽度

 border-right-width：设置元素右边框宽度

 border-bottom-width：设置元素下边框宽度

 border-left-width：设置元素左边框宽度

border-style ：边框样式。

 border-top-style：设置元素上边框样式

 border-right-style：设置元素右边框样式

 border-bottom-style：设置元素下边框样式

 border-left-style：设置元素左边框样式

 属性值有：

  none：无边框。

  hidden：隐藏边框。对于表，hidden 用于解决边框冲突。

  dotted：点状边框。

  dashed：虚线边框。

  solid：实线边框。

  double：双线边框。两条单线与其间隔的和等于指定的border-width值。

  groove：3D凹槽边框。

  ridge：3D垄状边框。

  inset：凹边框。

  outset：凸边框。

border-color ：边框颜色。

1.1 边框各样式效果图

1.2 四条边颜色样式相同

1.3 四条边颜色不同，样式相同

1.4 四条边颜色相同，样式不同

1.5 设置上边框宽度、样式、颜色

1.6 设置右边框宽度、样式、颜色

1.7 设置下边框宽度、样式、颜色

1.8 设置左边框宽度、样式、颜色

以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _

相关问答

Q1: CSS搜索框样式

这个搜索框做的很好，看似简单，里面包含了大量CSS基础知识。由于时间关系，这里写了一个相似度为95%的样式供参考和学习，由于无法确认字体，先挑选了比较接近的Gautami

先上HTML

body

    div id="A"

        input id="inputTxt" type="text" placeholder="Search" /

        div id="inputBtn"Go/div

    /div

/body

这里开始写CSS

body { padding: 0; margin: 0; background: #D6D6D6; }

/*固定容器*/

#A { width: 316px; height: 28px; margin: 22% auto; border: 1px solid #A3A3A3; border-top-color: #939393; border-bottom-color: #D5D5D5; border-radius: 3px; box-shadow: 0px 1px 1px #f4f4f4; position: relative; }

    #A  * { position: absolute; top: 0; }

/*输入框*/

#inputTxt { left: 0; width: 246px; height: 24px; background: #E6E6E6; border: 0; border-top: 1px solid #C8C8C8; border-bottom: 1px solid #E6E6E6; outline: none; padding-left: 30px; color: #666; }

    #inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder { color: #B8B8B8; font: 600 13px 'Gautami'; }

/*按钮*/

#inputBtn { right: 0; width: 38px; height: 26px; line-height: 26px; background: linear-gradient(#E4E4E4, #B5B5B5); border: 1px solid transparent; border-top-color: #FCFCFC; border-left-color: #ADADAD; border-bottom-color: #B5B5B5; color: #6E6E6E; text-align: center; font-size: smaller; font-weight: bold; cursor: pointer; }

/*文字阴影*/

#inputTxt, #inputBtn, #inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder { text-shadow: 1px 1px 0px #fff; }

/*图标*/

#A:before, #A:after { content: ""; position: absolute; z-index: 2; box-shadow: 0px 1px 0px #fff; }

#A:before { left: 9px; top: 9px; width: 6px; height: 6px; border: 2px solid #ccc; border-radius: 50%; }

#A:after { left: 17px; top: 18px; width: 6px; height: 2px; background: #ccc; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); }

最后，上效果图：上为原始搜索框，下为本次代码实现的搜索框

Q2: 怎样用css写出圆形边框

1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：

2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：

3、最后打开浏览器，就可以看到圆角边框了：