css实现边框（我用css写,只想要div左右两边有边框,上下没有边框,要怎么写呢）

本文目录

• 我用css写,只想要div左右两边有边框,上下没有边框,要怎么写呢
• 怎么做css样式边框
• 在css中怎么加边框
• 怎样用css写出圆形边框
• 什么是css边框
• css表格的边框线怎么设置
• css怎么实现边框3D凹凸感觉（求大佬给个实现方向吧~~）
• 怎么用CSS设置html中的表格边框样式
• 用css怎么添加边框
• CSS如何怎么设置div边框颜色宽度和高度

我用css写,只想要div左右两边有边框,上下没有边框,要怎么写呢

实现方式如下：

1、先设全边框，再取消上下边框样式
border:1px solid #ccc; border-style:none solid;

2、先设全边框，再取消上下边框的宽度
border:1px solid #ccc; border-width:0 1px;

3、先设全边框，再取消上下边框
border:1px solid #ccc; border-top:none; border-bottom:none;

4、直接设置左右边框，上下边框不设置
border-top:none; border-left:1px solid #ccc; border-right:1px solid #ccc; 

以方式一为例，代码如图：

显示效果如下图：

这样就只显示了div的左右边框，而没有显示上下边框。

扩展资料：

CSS边框

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。

每个边框有 3 个方面：宽度、样式，以及颜色。在下面的篇幅，我们会为您详细讲解这三个方面。

边框与背景

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

可能的值：

参考资料：W3C官方网站

怎么做css样式边框

只是第一种的代码，第二种的话只需要吧div的实线solid改为虚线dashed就可以了

在css中怎么加边框

css中加边框,首先我们需要确定你要加边框的元素的id或者是id，还有你必须保证这个元素是块级元素，不然width和height对它是无效的，自然也没边框，通过加display:block;这个属性，来改成块级元素，具体看代码:
《html》
《head》
《style》
.div1{ //div本身就是块级，所以不需要，算span这中标签就是行级，所以需要display:block;
width:600px;
height:200px;
font-size:13px;
border:1px solid #f00;
}

《/head》

《body》
《div class=’div1’》

《/div》
《/body》
《/html》

怎样用css写出圆形边框

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

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

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

什么是css边框

元素的边框(border)是围绕元素内容和内边距的一条或多条线.

css border属性允许你规定元素边框的样式，宽度和颜色.

css边框:在html中，我们使用表格来创建文本周围的边框，但是 通过使用css边框属性，

我们可以创建出效果出色的边框，并且可以应用于任何元素,

元素外边距内就是元素的边框(border),元素的边框就是围绕元素内容和内边距的一条或多条线.每个边框有3个方面:宽度、样式/以及颜色。

css表格的边框线怎么设置

border-collapse 属性：设置表格的边框是否被合并为一个单一的边框，即：用于设置表格边框是合并显示还是分开显示。
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值：
-- separate 默认值：边框会被分开，不会忽略 border-spacing 和 empty-cells 属性；
-- collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性；
-- inherit：规定应该从父元素继承 border-collapse 属性的值。
双线表格边框的实现
html代码：
《table》
《tr》
《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》
《/tr》
《tr》
《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》
《/tr》
《tr》
《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》
《/tr》
《tr》
《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》《td》内容《/td》
《/tr》
《/table》

css代码：
table,table td{
text-align: center;
border: 1px solid #000;
border-collapse：separate；
}
table td{
padding: 10px 30px;
}
表格边框的双线样式其实很简单，只要同时设置表格外边框和table里的每个单元格的边框，就可以实现了。
因为separate是默认值，就算是不设置border-collapse：separate；表格也会呈现双线效果。
我们主要是来看看border-collapse属性合并边框，实现单线边框的方法，html代码一样，只需设置css样式：
css代码：
table,table tr td {
border: 1px solid #000;
text-align: center;

border-collapse: collapse;
}table tr td {
padding: 10px 30px;

}

单线边框的实现也很简单，它是在双线样式的基础上，设置border-collapse: collapse;
把相邻的两个table边框合并成一个，使得相邻的两条线并在一起，边框就以单线的形式显示了。
总结：表格边框的无论是单线边框样式，还是双线边框样式都在前端页面中应用广泛，大家可以根据自己

css怎么实现边框3D凹凸感觉（求大佬给个实现方向吧~~）

border-style 可以使用 

groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。    

ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。    

inset    定义 3D inset 边框。其效果取决于 border-color 的值。    

outset    定义 3D outset 边框。其效果取决于 border-color 的值。    

来实现一个3D边框效果

具体方法可以参考 border-style | 菜鸟教程

怎么用CSS设置html中的表格边框样式

一、只对表格table标签设置边框   -  TOP

只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。

案例详细如下：

1、对应css代码

《style》.table-a table{border:1px solid #F00} /* css注释：只对table标签设置红色边框样式 */ style》

2、对应html代码片段

《divclass=“table-a“》《tablewidth=“400“border=“0“cellspacing=“0“cellpadding=“0“》《tr》《tdwidth=“105“》站名td》《tdwidth=“181“》网址td》《tdwidth=“112“》说明td》tr》《tr》《td》DIVCSS5td》《td》www.divcss5.comtd》《td》CSS学习td》tr》《tr》《td》CSS5td》《td》www.css5.com.cntd》《td》CSS切图td》tr》table》div》

二、对td设置边框   -   TOP

对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。

详细案例教程如下：

1、对应css代码

《style》.table-b table td{border:1px solid #F00} /* css注释：只对table td标签设置红色边框样式 */ style》

2、对应html源代码片段

《divclass=“table-b“》《tablewidth=“400“border=“0“cellspacing=“0“cellpadding=“0“》《tr》《tdwidth=“105“》站名td》《tdwidth=“181“》网址td》《tdwidth=“112“》说明td》tr》《tr》《td》DIVCSS5td》《td》www.divcss5.comtd》《td》CSS学习td》tr》《tr》《td》CSS5td》《td》www.css5.com.cntd》《td》CSS切图td》tr》table》

三、对table和td技巧性设置表格边框   -   TOP

如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。

解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。

解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。

1、对应css代码：

《style》.table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注释： 只对table td设置左与上边框； 对table设置右与下边框； 为了便于截图，我们将css 注释说明换行排版 */ style》

2、对应html源代码片段：

《divclass=“table-c“》《tablewidth=“400“border=“0“cellspacing=“0“cellpadding=“0“》《tr》《tdwidth=“105“》站名td》《tdwidth=“181“》网址td》《tdwidth=“112“》说明td》tr》《tr》《td》DIVCSS5td》《td》www.divcss5.comtd》《td》CSS学习td》tr》《tr》《td》CSS5td》《td》www.css5.com.cntd》《td》CSS切图td》tr》table》

四、对table和td设置背景，实现完美表格边框   -   TOP

1、基础设置

1）、先设置table css背景为红色

2）、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件窗口底部会“属性”面板会出现对应table表格属性设置地方，我们将“间隔”填写为“1”。这个时候我们会看到table表格标签里cellspacing值为“1”（cellspacing=“1“）。

借助DW软件设置表格单元之间间距

或

直接对

标签内cellspacing=“1“即可，得到：

《tablewidth=“400“border=“0“cellspacing=“1“cellpadding=“0“》

3）、设置table td背景为白色

2、css代码：

《style》.table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注释：设置table背景为红色，td背景为白色 */ style》

3、对应html源代码：

《divclass=“table-d“》《tablewidth=“400“border=“0“cellspacing=“1“cellpadding=“0“》《tr》《tdwidth=“105“》站名td》《tdwidth=“181“》网址td》《tdwidth=“112“》说明td》tr》《tr》《td》DIVCSS5td》《td》www.divcss5.comtd》《td》CSS学习td》tr》《tr》《td》CSS5td》《td》www.css5.com.cntd》《td》CSS切图td》tr》table》div》

五、css table表格边框实现总结   -  TOP

以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。

用css怎么添加边框

《style》
.kuang{width:200px;height:50px;color:white}
《/style》
《div class=“kuang“》《/div》
《div class=“kuang“》《/div》
《div class=“kuang“》《/div》
《div class=“kuang“》《/div》
《div class=“kuang“》《/div》

CSS如何怎么设置div边框颜色宽度和高度

CSS设置div边框颜色宽度和高度步骤如下：

1、新建一个html文件，创建一个类名为wrap的div。

2、先通过css类选择器选择到div来控制div的宽度和高度和背景颜色（没有边框时方便看出来div的大小）。

3、通过div 的border属性控制边框颜色，设置border的宽度为2px，线型为实线，颜色为蓝色。

4、这样就可以设置div边框颜色宽度和高度，如下图：

扩展资料：

css border属性：

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width，border-style，border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。