边框

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开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...

随机推荐

基本图像操作和处理(python)
基本图像操作和处理(python) PIL提供了通用的图像处理功能,以及大量的基本图像操作,如图像缩放.裁剪.旋转.颜色转换等. Matplotlib提供了强大的绘图功能,其下的pylab/pyplo ...
JMeter使用代理进行录制
参考: http://www.cnblogs.com/zhuque/archive/2012/11/13/2767747.html JMeter支持第三方(Badboy)录制和代理录制,Badboy录 ...
1014 装箱问题 CODE[VS]
1014 装箱问题 2001年NOIP全国联赛普及组时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解查看运行结果题目描述 Descripti ...
bzoj3032 七夕祭题解
题面 TYVJ七夕祭和11区的夏祭的形式很像.矩形的祭典会场由N排M列共计N×M个摊点组成.虽然摊点种类繁多,不过cl只对其中的一部分摊点感兴趣,比如章鱼烧.苹果糖.棉花糖.射的屋--什么的.Vani ...
Fiddler 手机爬虫
Fiddler抓包工具配置Fiddler 添加证书信任,Tools - Options - HTTPS,勾选 Decrypt Https Traffic 后弹出窗口,一路确认 ...from bro ...
Linux基础_网站权限规划
Linux系统默认的权限: 对于文件来说, 默认的权限: rw-r--r-- 644 对于目录来说:rwxr-xr-x 755 网站比较安全的权限: 网址程序存放在/app/blog 目录下面. 1 ...
Storm 系列（四）—— Storm 集群环境搭建
一.集群规划这里搭建一个 3 节点的 Storm 集群:三台主机上均部署 Supervisor 和 LogViewer 服务.同时为了保证高可用,除了在 hadoop001 上部署主 Nimbus ...
Go语言标准库之fmt
fmt标准库是我们在学习Go语言过程中接触最早最频繁的一个了,本文介绍了fmtb包的一些常用函数. fmt fmt包实现了类似C语言printf和scanf的格式化I/O.主要分为向外输出内容和获取输 ...
Docker详解（二）
目录 1.Docker常用命令 1.1 镜像命令 1.2 容器命令 1.2.1 常用的容器命令 1.2.2 重要的容器命令序言:上一章我们初步介绍了一下Docker的概念,那么这次我们着手于Dock ...
android 解决多品牌手机拍照问题,尤其是小米手机
先上个图吧 .点击头像弹出下面对话框,然后直接上代码. 头像是自定义控件实现的圆形头像,当然就目前而言想要实现圆形头像的资料太多了,随便找个就行 <com.kuibu.jucai.widge ...

06-border

边框