CSS .css边框属性(border)
2024-08-25 08:03:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style>
/*.box{
height: 100px;
width: 100px;
background-color: #3385ff;
border-top:1px double #000;
border-right:2px dashed red;
border-bottom:3px outset white;
border-left: 4px solid #000; }*/
.box{
height: 0px;
width: 0px;
border-width:25px;
border-style:solid;
border-color: red green blue purple;
}
.box{
height: 0px;
width: 0px;
border-width:25px;
border-style:solid;
border-color: red white white;
border-bottom:none; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图如下:
在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式
我们会使用css中的border属性来设置边框
一般会通过连写来设置border,他下面还有width,style,color的属性,
在开发中,我们会使用连写。
写法1:(按照方向)
快捷键:bd+
border: 1px solid #000; 这样的属性设置,四个边框属性值是相同
当然我们也可以分别设置四个边框的属性:
快捷键:bdt+
border-top: 1px solid #000;
快捷键:bdr+
border-right: 2px solid #000;
快捷键:bdb+
border-bottom: 3px solid #000;
快捷键:
border-left: 4px solid #000;
其中的属性分别是:width,style,color.
写法2:(按照属性)
border-width:1px 2px 3px 4px;
border-style:none dashed double dotted;
border-color:red green white black;
注意点:1.这四个属性按照上右下左来赋值,顺序不能错。
2.这四个属性值是可以省略的,例如,当你只写上右下的时候,没写左边
这时,左边的属性会按照右边的属性,当你没设置下和右的时候,下会和上
一样,左会和上一样。当你只写了第一个,那么这四条边框会都会按照第一个
来取值。
写法3:(单独设置)
还可以单独设置每条边框单独的属性值,例如:
border-right-width:3px;
border-left-style:double;
border-bottom-color:red;
border-style有很多取值:
最新文章
- POJ 2718 Smallest Difference【DFS】
- Topology and Geometry in OpenCascade-Adapters
- 湘潭1247 Pair-Pair(树状数组)
- docker与虚拟机性能比较
- 如何查询拥有执行某个Tcode权限所有人员
- Hot OS&#39;15 summary
- python日志模块logging
- Javascript原型钩沉
- mysql innodb 数据打捞(一)innodb 页面结构特征
- tabhost中activity跳转动画不显示的解决办法
- JavaScript算法与数据结构知识点记录
- [APIO2015]雅加达的摩天楼
- Linux shell 脚本(三)
- vim编辑器的命令总结
- 【洛谷P1516】青蛙的约会
- 学习Acegi应用到实际项目中(1)
- 根域名服务器(root DNS Servers)会被DDoS打垮么?
- loli的搜索测试-我真不知道是第多少次了
- .NET MVC+ EF+通用存储过程实现增删改功能以及使用事物处理
- Java并发知识点总结
热门文章
- css 重点知识 和 bug 解决方法
- 互联网大厂Java面试题集—Spring boot面试题(一)
- javascript 获取function的所在文件,并读取代码文件
- How to use special characters in XML?
- Python3操作MySQL基于PyMySQL封装的类
- [ERR] Node 172.16.6.154:7002 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
- 学习之Redis(二)
- 官方版vs2008至vs2013下载地址
- 「漏洞预警」Apache Flink 任意 Jar 包上传导致远程代码执行漏洞复现
- How to Create Transportable Tablespaces Where the Source and Destination are ASM-Based (Doc ID 394798.1)