CSS3设置Div左右两边或者上下边框的样式

最新推荐文章于 2025-10-10 15:21:36 发布
原创 最新推荐文章于 2025-10-10 15:21:36 发布 · 2w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Css3 #div边框

本文介绍了使用CSS3为div元素设置特定边框的方法，包括只显示某一边或某些边框的技巧。提供了多种实现方式，如直接设置、先设置全边框再取消不需要的部分等。

关于CSS3设置Div左右两边或者上下边框的样式

 

目前可以通过如下方法，实现div只显示某些边框。

1、border: 1px dashed lightgray; border-top: none; border-left: none; border-right: none;

 

 

2、先设全边框，再取消上下边框,如下：

border:1px solid #ccc; border-style:none solid;

3、border:1px solid #ccc; border-width:0 1px;

 

这里有一个样式图如下：

 

 

 

CSS文字左右两边有线
HarryHY的博客
10-04 1374
效果图： 结构 <div class="more"> <div class="liner"></div> <div class="text"> <span>点击查看更多</span> </div> </div>...
Css设置border从中间向两边的颜色渐进效果
Cc
12-23 3096
示例如下： html部分 <div class="globalTitle"> <img src="images/globalTitleleft.png" alt=""> <p>供水压力分布</p> <img src="images/globalTitleright.png" alt=""&gt.
CSS圆角有立体感的DIV边框
06-22
CSS圆角有立体感的DIV边框! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.youkuaiyun.com/
div的border-style 边框风格属性
热门推荐
huzi111的专栏
06-20 2万+
边框风格属性(border-style) 　　这个属性用来设定上下左右边框的风格，它的值如下：　　none (没有边框，无论边框宽度设为多大)　　dotted (点线式边框)　　dashed (破折线式边框)　　solid (直线式边框)　　double (双线式边框)　　groove (槽线式边框)　　ridge(脊线式边框)　　inset (内嵌效果的边框)　　outset (突起效果的边框)
在JavaScript / HTML中，调整div的边框
最新发布
番茄鸡蛋的专栏
10-10 490
HTML中可以通过CSS灵活调整<div>元素的边框样式。主要方法包括：1）使用border属性统一设置四周边框的宽度、样式和颜色；2）通过border-top/right/bottom/left单独设置各边样式；3）用border-width/style/color分别控制边框属性；4）推荐使用CSS类集中管理样式，并可结合border-radius添加圆角效果。边框样式支持实线(solid)、虚线(dashed)、点线(dotted)等多种类型，颜色可使用命名值或十六进制/RGBA格式。
div 边框
dianchamian8747的博客
04-22 927
1、四个边框border-left设置左边框，一般单独设置左边框样式使用border-right设置右边框，一般单独设置右边框样式使用border-top设置上边框，一般单独设置上边框样式使用border-bottom设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。 2、四边相同边框border简写#divcss5{border:1px so...
CSS中div的边框
李昆鹏的博客
05-11 5136
----------------------------------CSS中div的边框----------------------------------------div的边框样式"border-style”代码示例：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl...
css做尖角,css实现尖角div
weixin_30978239的博客
08-04 759
css实现尖角div尖角在上面效果图：代码：[html]尖角div#top{width:400px;height:250px;border:3px solid; /* 边框宽度为3px */position:relative;}.sp1,.sp2{display:block;height:0px;width:0px;position:absolute;font-size:0;line-heig...
精选资源
纯CSS3实现精美的丝带样式特效特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3技术来创建精美的丝带样式特效。CSS3是一种强大的样式表语言，能够为网页元素添加丰富的视觉效果，包括动态的、响应式的和富有创意的设计。在这个案例中，我们将关注如何利用:...
帮我写个div并且设置左右下三个边框，左右两边颜色自下往上越来越浅
06-25
要创建一个带有左右下三个边框的`<div>`，并且让左右两边的边框颜色自下往上渐变变浅，可以使用CSS3的`border-image`属性结合线性渐变（`linear-gradient`）来实现。通过指定边框图像的渐变方向和颜色停止点，可以...
css3+伪元素实现鼠标移入时下划线向两边展开的效果
09-24
在本示例中，我们将详细探讨如何利用伪元素`:before`和`:after`以及CSS3的过渡（transition）属性，实现鼠标移入时下划线从中间向两边展开的效果。 首先，我们需要创建一个基础的HTML结构，包含一个ID为"underline...
DIV边框动态效果
05-21
鼠标 点击 移动 DIV 边框 动态效果，点击触发，div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果，点击触发，div沿边框画线动态效果。 鼠标 点击 移动 DIV 边框 动态效果，点击触发，div沿边框画线动态效果。
div 中如何加各种边框（转）
业精于勤荒于嬉;行成于思，毁于随。
08-30 2837
边框风格属性(border-style) 　　这个属性用来设定上下左右边框的风格，它的值如下：　　none (没有边框，无论边框宽度设为多大)　　dotted (点线式边框)　　dashed (破折线式边框)　　solid (直线式边框)　　double (双线式边框)　　groove (槽线式边框)　　ridge(脊线式边框)　　inset (内嵌效果的边框)　　outset (突起效果的边框)
DIV+CSS虚线边框
weixin_42504805的博客
07-21 1519
我的右边边框无边线而其它三边为黑色虚线边框实例Html代码： 我的左边为黑色虚线边框Html代码： 我的右边为黑色虚线边框
CSS——65. 边框样式（边框属性）
weixin_63215361的博客
01-12 333
【代码】CSS——65. 边框样式（边框属性）
css div 文本属性 列表属性 边框
今天可爱了吗ik的博客
05-16 324
目录11 11 span是行元素，不会自动换行 p,div是块状元素，会自动分行 用font的话里面的标签顺序不能乱。
CSS基础笔记六，DIV盒子模型（content内容，内边距paddins，边框border，外边距margin）
qq_55006020的博客
06-28 3243
盒子模型分为四个区域内容，可以往里面安放的元素内边距padding（可以用像素填充，也可以用百分比，还可以指定上下左右的不同的款式），简写模式，1个值的情况下 就是上下左右 四个值是上右下左边框border边框的样式 有实线（solid），虚线（dashed），双实线（double），点线（dotted）border-width 指定边框的宽度边框可以设置圆角（border-rddius） 用百分比或者像素边框的不同方位 border-left/top/rigth/bottom。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 6476
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
div先填充另一个大div左右两边 再填充中间
08-01
但是，有一个问题：如果中间区域的内容很多，我们希望它不要影响左右两栏的高度，即希望三栏高度一致（由最高的那栏决定），那么我们可以设置父容器`align-items: stretch`（默认值就是stretch，所以不需要额外设置...
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值