06-border
边框
border：边框，描述盒子的边框
边框的三要素：粗细 线性样式 颜色
例如：border：1px solid red；
如果颜色不写，默认是黑色；如果粗细不写，不显示边框；如果只写线性样式，默认有3px的粗细，线性样式，颜色默认是黑色。
border的写法
1.常用写法
border：1px solid green；
线性样式种类：solid（实线）、dotted（点线）、dobule（双实线）、dashed（虚线）
2.三要素写法
border-width：3px；
border-style：solid；
border-color：red；
3.按方向来写
border-top：10px solid green；
border-right：10px solid green；
border-bottom：10px solid green；
border-left：10px solid green；
还可以这样写:border-top-width：10px；
border-top-style：solid；
border-top-color：red；
4.不设置样式
border：none；
border：0；
使用border制作小三角
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>流浪者</title>
- <style>
- .box{
- width: 0px;
- height: 0px;
- border-bottom: 100px solid red;
- border-left: 100px solid transparent;
- border-right: 100px solid transparent;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
使用border制作圆
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>流浪者</title>
- <style>
- .box{
- width: 200px;
- height: 200px;
- border: 1px solid red;
- border-radius: 50%;
- background-color: green;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
作者：流浪者
日期：2019-08-31
06-border的更多相关文章
- ionic1滑动时间选择器
上图: 1.derective代码 .directive('monthPicker', function ($ionicScrollDelegate) { return { restrict: 'E' ...
- 活泼的CSS 3动态气泡按钮制作
这一次,我们正在创造一个有用的设置与对CSS3的多重背景和动画的力量动画按钮.通过此按钮包,您可以很容易地变成一个动画按钮,在您的网页上的任何链接只是指定一个类名.没有必要JavaScript.四色主 ...
- javascript基础06
javascript基础06 splice var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返 ...
- WPF入门教程系列十——布局之Border与ViewBox（五）
九. Border Border 是一个装饰的控件,此控件绘制边框及背景,在 Border 中只能有一个子控件,若要显示多个子控件,需要将一个附加的 Panel 控件放置在父 Border 中.然后可 ...
- 【博客美化】06.添加QQ交谈链接
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- W3School-CSS 边框(border)实例
CSS 边框(border)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边 ...
- border边框的宽度/样式/颜色 全部值
border 用emmet写border的时候, 缩写是:bd. 不是b, 也不是bdr: b会扩展成bottom, bdr 会扩展成 border-right, border的宽度: 1px 基本上 ...
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
- ThinkPhp学习06
原文:ThinkPhp学习06 一.简单学习修改用户信息模块 1.编写UserAction.class.php <?php class UserAction extends Action{ pu ...
- iOS回顾笔记（06） -- AutoLayout从入门到精通
iOS回顾笔记(06) -- AutoLayout从入门到精通 随着iOS设备屏幕尺寸的增多,当下无论是纯代码开发还是Xib/StoryBoard开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...
随机推荐
- （五十二）c#Winform自定义控件-LED数字
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- ZAO 换脸不安全？用 python 轻松实现 AI
最近两天一款名为 「ZAO」 的 App 刷爆了朋友圈,它的主打功能是 AI 换脸,宣称「只需一张照片,就能出演天下好戏」 : 现实中不能实现当明星的梦,在这个 App 里你可以,想演谁演谁.新鲜.好 ...
- CodeForces 522C Chicken or Fish?
Chicken or Fish? 题意比较难理解. 需要注意的是 就算某个人抱怨了 但是的t[i]也是他最后选择的结果. 题解: 首先考虑没有r[i] = 1的情况. 直接记录t[i]=0的数目,最后 ...
- CF940A Points on the line 思维
A. Points on the line time limit per test 1 second memory limit per test 256 megabytes input standar ...
- codeforces 919C Seat Arrangements 思维模拟
C. Seat Arrangements time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Spring 两大核心 IOC 和 AOP
如果你的简历上写着Spring (请详述一下spring的两大核心)这个问题一定会被问到. 一.什么叫IOC 1. IOC 全称(Inversion of Control)-- 控制反转. IOC 只 ...
- Java日志之Slf4j，Log4J，logback原理总结
几乎任何应用,一定是需要日志的. 那么,面对种类繁多的日志框架和配置,我们该何去何从? 1.前奏:我是在研究mybatis源码的过程中才意识到需要搞明白日志原理这回事,因为mybatis(和一些其他开 ...
- 洛谷 P3952时间复杂度 （本地AC测评RE的伪题解）
[题目描述] 小明正在学习一种新的编程语言 A++,刚学会循环语句的他激动地写了好多程序并 给出了他自己算出的时间复杂度,可他的编程老师实在不想一个一个检查小明的程序, 于是你的机会来啦!下面请你编写 ...
- 前端利器躬行记（5）——Git
Git是一款开源的分布式版本控制系统,它的出现和Linux紧密相关.Linux内核项目组为了能更好地管理和维护Linux内核开发,于2002年开始启用商业的分布式版本控制系统BitKeeper.虽然软 ...
- .Net轻量状态机Stateless
很多业务系统开发中,不可避免的会出现状态变化,通常采用的情形可能是使用工作流去完成,但是对于简单场景下,用工作流有点大财小用感觉,比如订单业务中,订单状态的变更,涉及到的状态量不是很多,即使通过简单的 ...