原标题: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边框竟然可以这么用相关推荐

  1. css学习之border 边框

    边框,也就是盒子模型的四周, 1.四边相同边框border简写 #divcss5{border:1px solid #00F} CSS读取有从上到下.从左到右读取原理,而先设置了整个边框样式,后再加上 ...

  2. css中去掉input边框颜色,css怎么去掉input边框

    li默认是块状元素,总是在新行上开始,占据一整行. 首页 关于我们 < 2021-04-02 20:31:42 去掉input边框的具体操作步骤如下:1.在html页面中输入input的相关代码 ...

  3. html怎么做一个心形边框,使用CSS获取心形边框?

    我有这样的代码,用于创建一个彩色心脏(其中有一个蓝色的背景),并使用CSS消色心脏(白色与蓝色边框有色):使用CSS获取心形边框? #favourite_user { position: relati ...

  4. css怎么设置圆角背景,CSS新特性:圆角边框多栏Gird布局背景设置

    到现在为止,只有一些已经工作的CSS3特性. 到现在为止,只有一些已经工作的特性,他们中的一些如下: 圆角 从web2.0开始,开始流行使用圆角,如果你不使用圆角,你的网站可能不会被列入web2.0网 ...

  5. html渐变设置颜色长度,css渐变色注意的几点

    1.角度和from to只能运行一个.并且可以相互代替.看api 语法: = linear-gradient([ [ | to ] ,]? [, ]+) = [left | right] || [to ...

  6. php表格所有边框实线,css表格怎么添加边框样式?css表格边框样式总结(附完整实例)...

    本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧 首先我们先看看如何利用css来给表格添加边框: ...

  7. html 最小边框宽度,css如何让div边框不占宽度?

    HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度呢? 我们做网站时可以添加边框box-sizing属性:让边框不 ...

  8. html 边框轮廓,CSS半圈(边框,仅轮廓)

    小编典典 您可以使用border-top-left-radius和border-top-right- radius属性根据框的高度(和添加的边框)在框上四角. 然后在框的顶部/右侧/左侧添加边框以达到 ...

  9. html 控制边框长度,如何控制CSS边框长度的示例代码分享

    CSS边框长度控制 CSS边框长度控制.以前需要边框长度比容器小一些时,我用p嵌套.后来发现伪类在实现这个效果时很方便,只需要一个p就够了,另外调整padding和margin都不会很麻烦. bord ...

最新文章

  1. Apache的443端口被占用解决方法
  2. C语言中,#include 和#include 的区别和注意点
  3. 程序员入职国企,1周上班5小时,晒出薪资感叹:腾讯当CEO也不去
  4. oracle中匹配函数怎么用,ORACLE 使用正则表达式的函数
  5. linux写程序四则运算,Shell编程之变量及四则运算
  6. [詹兴致矩阵论习题参考解答]习题3.6
  7. js+php聊天程序
  8. Android Http请求框架二:xUtils 框架网络请求
  9. python restful api_Python利用Django如何写restful api接口详解
  10. 《Python编程从入门到实践》记录之Python函数传递任意数量的实参
  11. Token九重天——如何设计区块链项目的通证模型
  12. [UE4] Spawn Emitter Attached 特效消失的问题的解决方法:ParticleSystem 必须附着在角色的 Mesh 上
  13. 安装AdventureWorks2008R2示例数据库
  14. 计算机操作系统教程徐甲同pdf,《操作系统实践教程》.pdf
  15. xp系统从u盘启动计算机,教你怎么用U盘安装Windows XP系统
  16. matlab中的颜色设置颜色,matlabpcolor设置颜色
  17. 品味kettle--(一)用eclipse 搭建源码
  18. 绵阳南山中学计算机老师邱浩,还原“博士论文走红”的中科院博士:学成还乡衣着朴素...
  19. 列存储相关概念和常见列式存储数据库(Hbase、德鲁依)
  20. python中的框架是什么_python开发框架介绍

热门文章

  1. hrbust 2026势力较量 【并查集】
  2. 自动驾驶系统进阶与项目实战(八)面向自动驾驶的高精度地图框架解析和实战
  3. 社会化分享bshare代码在网站中的使用(包括https下无效的解决方法)
  4. 用html做网站古诗春思,春思
  5. java接口通信协议_常见通信协议
  6. 杭州计算机类公务员考啥,浙江公务员招考已有14万人,报计算机类职位最俏
  7. python-word
  8. 【剑指offer】登峰造极--顺时针打印矩阵
  9. 疯狂动物城简介第一台通用计算机,疯狂动物城
  10. 实现三子棋游戏详细教学