html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用
原标题:CSS应用篇 | border边框竟然可以这么用
在我们平时网页中,想必大家一定用过border,可以根据border给我们提供的各种属性实现盒子的边框效果,那么今天就给大家分享一下边框的应用。
01
常规姿势
在CSS1中就定义了边框样式属性:border设置全部或指定具体边框样式。具体包括指定样式:宽度:width、样式:style(none、solid、dotted、dashed等)、颜色:color。可以通过border统一设置边框样式,也可以通过border-left:width style color独立设置边框样式。这部分相对比较简单,下面我们来使用div示例及样式展示一下基本设置方法:
02
特殊姿势
我们都知道,标准盒子模型的大小会受content(width,height)、padding、border的影响,所以,即使一个盒子未设置内容大小,只要有边框或内边距,盒子也是会有大小的。我们就从这里出发,假若盒子未设置宽度和高度,我们给盒子增加了边框大小为10px,给每边边框设置不同的颜色来看一下:
假使只有上边框有颜色,其他边框的颜色均为透明:
此时我们就会得到一个三角小图标,是不是感觉很神奇。
再比如,我们给盒子设置width,再来观察下,你就会发现你得到了一个梯形。
03
借助其他样式合并输出姿势
border边框还能与border-radius一起来做出我们希望效果。例如:
再做一个月亮给你呀:
再送你一朵小花花:
最后做一个火热的爱心送给你呀~~
责任编辑:
html盒子怎么设置边框长度,CSS应用篇 | border边框竟然可以这么用相关推荐
- css学习之border 边框
边框,也就是盒子模型的四周, 1.四边相同边框border简写 #divcss5{border:1px solid #00F} CSS读取有从上到下.从左到右读取原理,而先设置了整个边框样式,后再加上 ...
- css中去掉input边框颜色,css怎么去掉input边框
li默认是块状元素,总是在新行上开始,占据一整行. 首页 关于我们 < 2021-04-02 20:31:42 去掉input边框的具体操作步骤如下:1.在html页面中输入input的相关代码 ...
- html怎么做一个心形边框,使用CSS获取心形边框?
我有这样的代码,用于创建一个彩色心脏(其中有一个蓝色的背景),并使用CSS消色心脏(白色与蓝色边框有色):使用CSS获取心形边框? #favourite_user { position: relati ...
- css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置
到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角 从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...
- html渐变设置颜色长度,css渐变色注意的几点
1.角度和from to只能运行一个.并且可以相互代替.看api 语法: = linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [to ...
- php表格所有边框实线,css表格怎么添加边框样式?css表格边框样式总结(附完整实例)...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧 首先我们先看看如何利用css来给表格添加边框: ...
- html 最小边框宽度,css如何让div边框不占宽度?
HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度呢? 我们做网站时可以添加边框box-sizing属性:让边框不 ...
- html 边框轮廓,CSS半圈(边框,仅轮廓)
小编典典 您可以使用border-top-left-radius和border-top-right- radius属性根据框的高度(和添加的边框)在框上四角. 然后在框的顶部/右侧/左侧添加边框以达到 ...
- html 控制边框长度,如何控制CSS边框长度的示例代码分享
CSS边框长度控制 CSS边框长度控制.以前需要边框长度比容器小一些时,我用p嵌套.后来发现伪类在实现这个效果时很方便,只需要一个p就够了,另外调整padding和margin都不会很麻烦. bord ...
最新文章
- Apache的443端口被占用解决方法
- C语言中,#include 和#include 的区别和注意点
- 程序员入职国企,1周上班5小时,晒出薪资感叹:腾讯当CEO也不去
- oracle中匹配函数怎么用,ORACLE 使用正则表达式的函数
- linux写程序四则运算,Shell编程之变量及四则运算
- [詹兴致矩阵论习题参考解答]习题3.6
- js+php聊天程序
- Android Http请求框架二:xUtils 框架网络请求
- python restful api_Python利用Django如何写restful api接口详解
- 《Python编程从入门到实践》记录之Python函数传递任意数量的实参
- Token九重天——如何设计区块链项目的通证模型
- [UE4] Spawn Emitter Attached 特效消失的问题的解决方法:ParticleSystem 必须附着在角色的 Mesh 上
- 安装AdventureWorks2008R2示例数据库
- 计算机操作系统教程徐甲同pdf,《操作系统实践教程》.pdf
- xp系统从u盘启动计算机,教你怎么用U盘安装Windows XP系统
- matlab中的颜色设置颜色,matlabpcolor设置颜色
- 品味kettle--(一)用eclipse 搭建源码
- 绵阳南山中学计算机老师邱浩,还原“博士论文走红”的中科院博士:学成还乡衣着朴素...
- 列存储相关概念和常见列式存储数据库(Hbase、德鲁依)
- python中的框架是什么_python开发框架介绍