【CSS】盒子边框 ② ( 盒子边框单独指定语法 )
CSS 指定 语法 盒子 边框 单独
2023-06-13 09:18:08 时间
文章目录
一、边框单独指定语法
盒子的 边框 Border , 由 四个方向 的边框组成 , 左上右下 四个 方向 上的 边框 可以单独指定样式 ,
如 : 上边框指定 4 像素 的 红色 实线 , 下边框 指定 2 像素 的 灰色 虚线 ;
边框单独指定 语法 :
- 上边框 :
- 上边框样式 : 通过 border-top-style 属性设置 ;
- 上边框宽度 : 通过 border-top-width 属性设置 ;
- 上边框颜色 : 通过 border-top-color 属性设置 ;
- 总体写法 : 通过 border-top 属性设置 ;
- 下边框 :
- 下边框样式 : 通过 border-bottom-style 属性设置 ;
- 下边框宽度 : 通过 border-bottom-width 属性设置 ;
- 下边框颜色 : 通过 border-bottom-color 属性设置 ;
- 总体写法 : 通过 border-bottom属性设置 ;
- 左边框 :
- 左边框样式 : 通过 border-left-style 属性设置 ;
- 左边框宽度 : 通过 border-left-width 属性设置 ;
- 左边框颜色 : 通过 border-left-color 属性设置 ;
- 总体写法 : 通过 border-left 属性设置 ;
- 右边框 :
- 右边框样式 : 通过 border-right-style 属性设置 ;
- 右边框宽度 : 通过 border-right-width 属性设置 ;
- 右边框颜色 : 通过 border-right-color 属性设置 ;
- 总体写法 : 通过 border-right属性设置 ;
建议使用 每个边框 的 总体写法 ;
二、代码示例
1、边框单独指定代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div {
width: 300px;
height: 100px;
/* 上边框总体写法 */
border-top: 4px dotted blue;
/* 上边框总体写法 */
border-left: 2px dashed red;
/* 上边框总体写法 */
border-right: 2px dotted purple;
/* 上边框总体写法 */
border-bottom: 2px solid orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://blog.csdn.net/" class="blog">博客</a>
<a href="https://download.csdn.net/">下载</a>
<a href="https://edu.csdn.net/">学习</a>
<a href="https://bbs.csdn.net/">社区</a>
</div>
</body>
</html>
显示效果 :
2、设置表单边框代码示例
input 表单 输入框 默认效果如下 :
上述表单的 四个 边框 , 可以单独设置 , 可以将 上左右 三个方向的边框取消 , 将下边框的样式设置成 2 像素的红色实线 ;
#id2 {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid red;
}
设置后 , 效果如下 :
还有一种更简单的写法 , 就是 先将 表单的 四个方向的边框取消 , 然后单独设置 底部边框样式 :
#id3 {
border: none;
border-bottom: 2px solid red;
}
设置的样式如下 :
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div {
width: 300px;
height: 100px;
/* 上边框总体写法 */
border-top: 4px dotted blue;
/* 上边框总体写法 */
border-left: 2px dashed red;
/* 上边框总体写法 */
border-right: 2px dotted purple;
/* 上边框总体写法 */
border-bottom: 2px solid orange;
}
#id2 {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid red;
}
#id3 {
border: none;
border-bottom: 2px solid red;
}
</style>
</head>
<body>
<div class="nav">
<a href="https://blog.csdn.net/" class="blog">博客</a>
<a href="https://download.csdn.net/">下载</a>
<a href="https://edu.csdn.net/">学习</a>
<a href="https://bbs.csdn.net/">社区</a>
<br>
用户名 : <input type="text" id="id1"/>
<br>
密 码 : <input type="text" id="id2"/>
<br>
邮 箱 : <input type="text" id="id3"/>
</div>
</body>
</html>
显示效果 :
相关文章
- 总结一些,书写 CSS 的时候,经常犯的错误!
- 如何制作网页-初学者入门HTML+CSS
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- CSS选择器及优先级 总结
- 【说站】css定位叠放次序的使用注意
- CSS基本知识点——带你走进CSS的新世界
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS 换行_css不允许换行
- 前端JS、CSS版本控制
- 前端必备的 CSS 库,normalize.css
- 【CSS教程】简约渐变色登陆布局html+css代码
- 【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )
- 【CSS】课程网站开发示例 ① ( 文件目录结构准备 | CSS 属性书写顺序 - 重要 )
- CSS 分页实例详解编程语言
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- HTML CSS
- CSS如何影响MySQL的使用(css影响MySQL)
- 突破界限css与mysql的力量(css和mysql)
- 130个漂亮CSS布局站点参考
- css写菜单:简洁注释版
- div+css实现的滑动门,简洁,新手上路(小鸽子系列)
- 用css滤镜实现的文字描边效果的代码
- CSS教程之css选择器、属性、值
- div+css模拟表格效果代码
- juqery学习之六CSS--css、位置、宽高
- php压缩多个CSS为一个css的代码并缓存
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- JQuery结合CSS操作打印样式的方法