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开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...
随机推荐
- zstuoj 4423: panda和卡片
传送门:http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4423 题意: 给定许多数字,这些数字都是2的倍数,问可以用这些数字组成多少个数字. ...
- Kth Minimum Clique_2019牛客暑期多校训练营(第二场)
题目连接: https://ac.nowcoder.com/acm/contest/882/D Description Given a vertex-weighted graph with N ver ...
- 如何设计web系统的监控
如何使用httpclient设计开发一套web系统监控? 我之前有实现和写过关于运维和开发两个层面的监控系统的文章(https://www.cnblogs.com/zhikou/p/8576891.h ...
- 【Offer】[57-2] 【和为S的连续正数序列】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个正数s,打印出所有和为s的连续正数序列(至少含有两个数).例如,输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以 ...
- CF785D Anton and School – 2
- hadoop2.7.3启动报错问题
在日志里面可以看出是没有对应的权限,因此在hdfs_site.xml中添加 <property> <name>dfs.permissions</name> < ...
- 关于git远程被覆盖的问题
有同事A和B,git远程版本为A0,两个人的本地项目已经跟远程同步.同事A先向git提交了3次,A1.A2.A3.git远程版本为A0.A1.A2.A3.同事B也向git提交了1次B1,但是同事B提交 ...
- .Net基础篇_学习笔记_第六天_For循环语法
For循环:专门处理已知循环次数的循环. 小技巧:连续敲击两下TAB键循环体自动搭建完成. For循环语法: for(表达式1;表达式2;表达式3){ 循环体;}表达式1一般为声明循环变量,记录循环 ...
- Hibernate,一对多,多对一
Hibernate环境的配置 hibernate.cfg.xml的配置 <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibern ...
- Python中使用moviepy进行视频分割
场景 moviepy官网: https://pypi.org/project/moviepy/ 是一个用于视频编辑的Python库:切割.连接.标题插入.视频合成.非线性编辑,视频处理和定制效果的创建 ...