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开发,自动布局已经是必备的开发技能了. 我使用自动布局 ...
随机推荐
- cogs 1199选课（树形dp 背包或多叉转二叉
http://cogs.pro:8080/cogs/problem/problem.php?pid=vQyiJkkPP 题意:给m门课,每门课在上完其先修课后才能上,要你从中选n门课使得总学分尽可能大 ...
- CodeForces 639C Bear and Polynomials
Bear and Polynomials 题解: 如果改变一个其中的一个数,那么需要知道的是,前面的数都可以进到当前位来,如果过不来的话,那么就会因为前面有数导致无法变成0. 所以我们将前面的数不断向 ...
- 杭电多校第九场 hdu6424 Rikka with Time Complexity 数学
Rikka with Time Complexity Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K ( ...
- hdu 5898 odd-even number(数位dp）
Problem Description For a number,if the length of continuous odd digits is even and the length of co ...
- CSS特效集锦：视觉魔法的碰撞与融合（二）
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配
本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...
- Failed to execute goal on project e3-manager: Could not resolve dependencies for project cn.e3mall:e3-manager:pom:0.0.1-SNAPSHOT: Could not find artifact cn.e3mall:e3-parent:jar:0.0.1-SNAPSHOT
新建好工程后一定要记得从底层开始clean和install 在启动新建的工程时到最后一步出现了这个问题: Failed to execute goal on project e3-manager-we ...
- WEB应用中普通java代码如何读取资源文件
首先: 资源文件分两种:后缀.xml文件和.properties文件 .xml文件:当数据之间有联系时用.xml .properties文件:当数据之间没有联系时用.properties 正题: ...
- Spring Cloud官方文档中文版-服务发现：Eureka客户端
官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR2/#_spring_cloud_netflix 文中例子我做了一些测试在:h ...
- TypeScript中是使用强类型函数作为参数
class Foo { save(callback: (n: number) => any) : void { callback(42) } multipleCallbacks(firstCal ...