认识border_border内边框-程序员宅基地

技术标签： css  

border就是边框。边框有三个要素：粗细、线型、颜色。

颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。

<style>
div{
padding: 0;
}
.box{
width: 300px;
height: 300px;
/* 边框的3个要素，其中颜色，可以省略不写。不写默认是黑色。 */
border: 3px solid;
}
</style>
</head>
<body>
<div class="box">
 
</div>

线型的设置：

/* dotted点虚线 */
border: 3px dotted blue;

/* dashed矩形虚线 */
border: 3px dashed blue;

/* solid实线 */
border: 3px solid blue;

/* double内外双实线 */
border: 3px double blue;

/* groove沟槽状边框 */
border: 50px groove blue;

/* ridge菱形边框 */
border: 50px ridge blue;

可以发现菱形边框与沟槽状边框的区别是亮面和暗面相反

/* inset3D凹边 */
border: 50px inset blue;

/* outset3D凸边 */
border: 50px outset blue;

凹凸边的亮暗也是相反的

不过线型在不同浏览器有不同的显示效果比如，border:10px ridge red; 在chrome和firefox、IE中有细微差别：

chrome：

firefox：

IE：

谷歌和火狐差别不大，但ie的颜色明显深了很多

border属性能够被拆开

border是一个大综合属性，

border:1px solid red;  

border属性能够被拆开，有两大种拆开的方式：1） 按3要素:border-width、border-style、border-color2） 按方向：border-top、border-right、border-bottom、border-left

把边框border按3要素：

<style>
.box{
width: 300px;
height: 300px;
/* 按3要素拆开: */
border-width: 30px;
border-style: solid;
border-color: aqua;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>

如果某一个小要素后面是空格隔开的多个值，那么就是上右下左的顺序

/* 10px 20px ---上下10  左右20 */
border-width: 10px 20px;
/* solid dashed dotted --- 上solid  左右dashed  下dotted */
border-style: solid dashed dotted;
/* red green blue yellow --- 上red  右green 下blue 左yellow */
border-color:red green blue yellow ;

把边框border按方向来拆开

<style>
.box{
width: 300px;
height: 300px;
/* 按照方向拆分 */
border-top: 30px solid red;
border-right: 30px solid green;
border-bottom: 30px solid blue;
border-left: 30px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

把边框border按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句：

/* 边框按方向还能再拆一层把每个方向按照3要素写 */
border-top-width:30px;
border-top-style:solid;
border-top-color:red;
border-right-width: 30px;
border-right:solid;
border-right-color:green;
border-bottom-width: 30px;
border-bottom-style: solid;
border-bottom-color: aqua;
border-left-width: 30px;
border-left-style:solid;
border-left-color:blue;

border可以没有

<style>
.box{
width: 300px;
height: 300px;
background-color: red;
/* 4个边都没有边框 */
/* border: none; */
 
border:30px solid blue;
/* 某一个边没有边框 */
border-left: none;
}
</style>
</head>
<body>
<div class="box">盒子</div>

outline轮廓线

outline轮廓线 在边框线的外面，它和盒模型没有任何关系。轮廓线不占据页面宽度。

去除input文本框的轮廓线：outline: none;

<style>
.txt{
width: 300px;
height: 26px;
line-height: 26px;
border: 1px solid greenyellow;
outline: none;
}
</style>
</head>
<body>
<input type="text" name="" id="" class="txt">
</body>

轮廓线不占据页面宽度。

outline: 20px solid orange;

 

所以，我们在实际项目中编写页面的时候，我们通常使用outline轮廓线去查看当前某个区块在页面中的位置。

border可以透明

透明是让颜色不可见，但是具体的某个方向的边框实际在浏览器渲染的时候，边框还是存在。

<style>
.box{
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-right: 200px solid green;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>

border制作小箭头：

<style>
.arrow{
width: 20px;
height: 20px;
border-top: 1px solid red;
border-left: 1px solid red;
transform: rotate(45deg);
margin: 50px 0 0 50px;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>

如上代码,三角形箭头原理:正方形的任意相邻的两边线然后旋转一定的角度，得到我们需要的任意方向的箭头,deg角度单位,rotate旋转角度.

  1. 小三角形的大小由正方形的宽高去控制

  2. 小三角形的粗细由border边框线的宽度去控制

  3. 小三角形的颜色由border边框线的颜色去控制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53632966/article/details/128196634

智能推荐

18个顶级人工智能平台-程序员宅基地

文章浏览阅读1w次，点赞2次，收藏27次。来源：机器人小妹　　很多时候企业拥有重复，乏味且困难的工作流程，这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本，企业别无选择，只能自动化某些功能以降低生产成本。　　通过数字化..._人工智能平台

electron热加载_electron-reloader-程序员宅基地

文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面，而不必每次去手动操作重新运行，这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便，但是不是每个 electron 项目必须的，所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader，国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader

android 11.0 去掉recovery模式UI页面的选项_android recovery 删除 部分菜单-程序员宅基地

文章浏览阅读942次。在11.0 进行定制化开发，会根据需要去掉recovery模式的一些选项 就是在device.cpp去掉一些选项就可以了。_android recovery 删除 部分菜单

mnn linux编译_mnn 编译linux-程序员宅基地

文章浏览阅读3.7k次。https://www.yuque.com/mnn/cn/cvrt_linux_mac基础依赖这些依赖是无关编译选项的基础编译依赖• cmake（3.10 以上）• protobuf (3.0 以上)• 指protobuf库以及protobuf编译器。版本号使用 protoc --version 打印出来。• 在某些Linux发行版上这两个包是分开发布的，需要手动安装• Ubuntu需要分别安装 libprotobuf-dev 以及 protobuf-compiler 两个包•..._mnn 编译linux

利用CSS3制作淡入淡出动画效果_css3入场效果淡入淡出-程序员宅基地

文章浏览阅读1.8k次。CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。1. 定义动画，名称为fadeIn@-webkit-keyf_css3入场效果淡入淡出

计算机软件又必须包括什么,计算机系统应包括硬件和软件两个子系统，硬件和软件又必须依次分别包括______？...-程序员宅基地

文章浏览阅读2.8k次。计算机系统应包括硬件和软件两个子系统，硬件和软件又必须依次分别包括中央处理器和系统软件。按人的要求接收和存储信息，自动进行数据处理和计算，并输出结果信息的机器系统。计算机是脑力的延伸和扩充，是近代科学的重大成就之一。计算机系统由硬件(子)系统和软件(子)系统组成。前者是借助电、磁、光、机械等原理构成的各种物理部件的有机组合，是系统赖以工作的实体。后者是各种程序和文件，用于指挥全系统按指定的要求进行..._计算机系统包括硬件系统和软件系统 软件又必须包括

随便推点

进程调度（一）——FIFO算法_进程调度fifo算法代码-程序员宅基地

文章浏览阅读7.9k次，点赞3次，收藏22次。一 定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面，即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单，只需把一个进程已调入内存的页面，按先后次序链接成一个队列，并设置一个指针，称为替换指针，使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应，因为在进程中，有些页面经常被访问，比如，含有全局变量、常用函数、例程等的页面，FIFO 算法并不能保证这些页面不被淘汰。这里，我_进程调度fifo算法代码

mysql rownum写法_mysql应用之类似oracle rownum写法-程序员宅基地

文章浏览阅读133次。rownum是oracle才有的写法，rownum在oracle中可以用于取第一条数据，或者批量写数据时限定批量写的数量等mysql取第一条数据写法SELECT * FROM t order by id LIMIT 1;oracle取第一条数据写法SELECT * FROM t where rownum =1 order by id;ok，上面是mysql和oracle取第一条数据的写法对比，不过..._mysql 替换@rownum的写法

eclipse安装教程_ecjelm-程序员宅基地

文章浏览阅读790次，点赞3次，收藏4次。官网下载下载链接：http://www.eclipse.org/downloads/点击Download下载完成后双击运行我选择第2个，看自己需要（我选择企业级应用，如果只是单纯学习java选第一个就行）进入下一步后选择jre和安装路径修改jvm/jre的时候也可以选择本地的（点后面的文件夹进去），但是我们没有11版本的，所以还是用他的吧选择接受安装中安装过程中如果有其他界面弹出就点accept就行..._ecjelm

Linux常用网络命令_ifconfig 删除vlan-程序员宅基地

文章浏览阅读245次。原文链接：https://linux.cn/article-7801-1.htmlifconfigping &lt;IP地址&gt;:发送ICMP echo消息到某个主机traceroute &lt;IP地址&gt;：用于跟踪IP包的路由路由：netstat -r: 打印路由表route add ：添加静态路由路径routed：控制动态路由的BSD守护程序。运行RIP路由协议gat..._ifconfig 删除vlan

redux_redux redis-程序员宅基地

文章浏览阅读224次。reduxredux里要求把数据都放在公共的存储区域叫store里面，组件中尽量少放数据，假如绿色的组件要给很多灰色的组件传值，绿色的组件只需要改变store里面对应的数据就行了，接着灰色的组件会自动感知到store里的数据发生了改变，store只要有变化，灰色的组件就会自动从store里重新取数据，这样绿色组件的数据就很方便的传到其它灰色组件里了。redux就是把公用的数据放在公共的区域去存..._redux redis

linux 解压zip大文件(解决乱码问题)_linux 7za解压中文乱码-程序员宅基地

文章浏览阅读2.2k次，点赞3次，收藏6次。unzip版本不支持4G以上的压缩包所以要使用p7zip：Linux一个高压缩率软件wget http://sourceforge.net/projects/p7zip/files/p7zip/9.20.1/p7zip_9.20.1_src_all.tar.bz2tar jxvf p7zip_9.20.1_src_all.tar.bz2cd p7zip_9.20.1make && make install 如果安装失败，看一下报错是不是因为没有下载gcc 和 gcc ++(p7_linux 7za解压中文乱码

推荐文章

热门文章

相关标签