border的几个用法。

1.三等分

2.传统的十字添加

3.定义块状元素的高度，边界

4.三角形

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin:0;padding:0;/*设置出事边距为0*/}html,body{width: 100%;height: 100%;}.con{width: 100px;height: 20px;border-top:60px double;/*高度为20，但是设置60px double进行三等分，形成20px,20px的空格。*/border-bottom: 20px solid blue;}/*border-hover利用border的默认color属性来设置边框，例如传统的十字添加*/.add{width: 100px;height: 100px;color:#ccc;transition: color .25s;/*演示250毫秒*/border:1px  solid; position: relative;top:0px;left: 50%;}/*做出一个块状元素，正方形*/.add:before{content: '';width: 60px;border-top: 10px solid;/*利用border边框来画十字*/position: absolute;/*使其居中，利用position的absolute绝对位置进行判断*/top:45px;/*向下偏移45像素，加上自身10px下方45px，正好100px*/left:20px;/*同理*/}.add:after{content: '';height: 60px;/*高度为60px*/border-left: 10px solid;position:absolute;top: 20px;left: 45px;}/*点击变色*/.add:hover{color: blue;}.bkp{height: 400px;/*定义块状元素的高度，边界*/width: 600px;background: url(../img/mooc2.png) no-repeat;border: 1px solid;
/*没有利用position的absolute绝对位置，加上top，left来居中等操作而是利用background-position的默认属性来确定*/background-position: 40px 40px;/*默认保持距离左边边框50像素*/            }.bkright{height: 400px;/*定义块状元素的高度，边界*/width: 400px;background: url(../img/mooc2.png) no-repeat;
/*没有利用position的absolute绝对位置，加上top，left来居中等操作而是利用background-position的默认属性来确定*/border-right: 40px solid transparent;position: absolute;background-position: 100% 40px;/*默认保持距离左边边框50像素*/    position: absolute;}.triangle{width: 100px;height: 100px;border:100px solid;border-color: red orange blue chartreuse;margin-left: auto;margin-right: auto;}.triangle2{width: 0px;height: 0px;border:50px solid;border-color: red red transparent transparent;margin-left: auto;margin-right: auto;}.triangle3{width: 300px;border: 100px solid;border-color:  transparent transparent red;}.123{height: 30px;/*定义块状元素的高度，边界*/width: 30px;background: url(../img/mooc2.png) no-repeat;border: 1px solid;}/*增加复选框面积*/.checkbox{border:2px solid transparent;/*border透明来增加点击区域*/box-shadow: insert 0 1px,insert 1px 0,insert -1px 0,insert 0 -1px;background-color: #fff;background-clip: content-box;color:#d0d0d5;}</style></head><body><div class="con"></div><div class="add"></div><div class="bkp"></div><div class="bkright"></div><div class="triangle"> </div><div class="triangle2"> </div><div class="triangle3"> </div></body>
</html>

border的几个用法。相关推荐

跟我一起了解less（3）：判断和循环
官网的api中,判断和循环是page的后面才被说明的,可能官方认为它们两个也属于"混合". 但为了更好的学习less,我把它拿到了这章先来了解一下. 注:例子截图是转换成css的语 ...
基于MQTT协议的WZ指令开发V3.0版本支持onenet
title: 基于MQTT协议的WZ指令开发V3.0版本支持onenet tags: WZ指令 date: 2019-02-18 10:53:00 视频讲解:(V3.0版本)-https://www. ...
Element Plus 实例详解（四）___Border 边框
Element Plus 实例详解(四)___Border 边框本文目录: 一.前言二.搭建Element Plus试用环境 1.搭建Vue3项目(基于Vite + Vue) 2.安装Elemen ...
java swing setborder_Swing编程边框(Border)的用法总结
2. 下面列出程序的完整实现代码: Java示例: package Test; import java.awt.*; import javax.swing.*; import javax.swing. ...
Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加：1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
html border 边距,css中border-sizing属性的用法
这篇文章给大家介绍的文章内容是关于css中border-sizing属性的用法,有很好的参考价值,希望可以帮助到有需要的朋友. box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子 ...
border之border-style用法
border-style border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式. border-style兼容性很好,基本所有浏览器都兼容 border-style拥 ...
outline的用法，outline和border的区别
个人理解: border:无论在box-size:border-box的情况下:还是在bo'x-size:content-box的情况下,border都会占据一定的大小 outline:outline ...
html 代码 border,HTML Style border用法及代码示例
DOM样式的border属性用于设置或返回元素边框的样式.我们可以为各个侧面(顶部,右侧,底部,左侧)设置不同的边框样式. border-style属性的每一侧都可以采用多个值. 用法: 它用于返回S ...

border的几个用法。

border的几个用法。相关推荐

最新文章

热门文章