谈一谈CSS-border里面值得提的一些thing

最新推荐文章于 2024-04-25 18:36:27 发布
最新推荐文章于 2024-04-25 18:36:27 发布
阅读量238 收藏
点赞数
分类专栏： CSS3 文章标签： CSS boreder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guitarist0505/article/details/79791122
版权

一、Border-style

1.border-style:dotted 巧用！

可以把dotted属性下的边框的大小数值设置为比容器小1px，使他变得很大。

2.border-style:double

   

用border:dotted做一些有趣的图形 ，比如：



二、Border-color

 当没有给border：添加颜色属性时，border默认为容器内color的颜色。

三、利用Border实现意想不到的一些效果





四、利用Border可以巧妙的实现区域大小的增加





怎么才这几个粉丝
关注
专栏目录
CSS border属性--妙用
weixin_34293911的博客
07-12 87
在ie下实现圆角效果 （由于border-radius兼容性特别差，所以要在ie低版本浏览器下实现圆周角效果特别难）利用border-style的dotted效果可实现如下图所示的圆效果： 代码简单如下 <!DOCTYPE html> <html lang="en"> <head> <m...
CSS3 border属性的妙用
weixin_30367169的博客
11-19 80
.ribbon { background: #45c9c8; position: absolute; width: 75px; height: 25px; line-height: 25px; top: -4px; left: -11px; ...
border妙用
caimaomaocai的博客
04-08 719
border是一个很有意思的css属性，巧妙使用border，有些效果就可以不用图片border的关键字：thin，薄的,等同于1px                            medium(默认值)，中等的，相等3px                            thick，厚的，等同于4pxborder-style的默认值是none而不是solid，所以不设置border...
css 边框（border）探索与妙用
huawu1993的博客
09-06 325
.chat{ width: 50px; height: 50px; border-style:solid; border-width: 50px; border-color: red #7802fb #02befb #1efb02; } 根据以上效果，我们发现边框是由三角形或者梯形无缝拼接的，根据这个特点，我们可以实现各种形状。 1.不规则三角形   我们可以把它的长边...
css使用伪类控制边框border长度的方法
weixin_64962562的博客
08-22 762
css使用伪类控制边框border长度的方法
CSS3-border-radius 边框样式属性
weixin_44486539的博客
10-04 3117
CSS3 中的 border-radius 属性用来设置变工况的样式，可以将直角边框改为圆角边框，甚至可以将一个矩形设置成一个圆形，该属性与其他样式属性结合使用可以做出许多有趣的图案 border-radius 属性主要是修改块级元素的四个角的弧度来改变元素的形状，该属性是一个综合属性，四个角的样式可以单独设置也可以综合设置；其属性值可以是 像素（px）、百分比（%）、em 等 border-ra...
css border-image 图片边框
学习真香
06-06 2472
css border-image 图片边框 效果 通过 css中的 border-image, 我们可以实现漂亮的边框效果. 先上效果图: 效果 1: 效果 2: 如何实现 border-image 样式的实现过程就是将我们提供的图片切分, 然后按照一定规则展示在 dom 元素. 下面的例子, 会用到下面的图片, 大家可以自取. 效果 1 的实现 #box { font-size: 16px; border: 3px solid; border-image-source: url(./b
postcss-plugin-px2rem 移动端适配原理
qq_33715850的博客
07-06 6567
postcss-plugin-px2rem 移动端适配原理
webpack配置之postcss-loader和postcss-preset-env
浅听记忆的博客
05-20 4343
在我们打包css的时候难免会遇到css的兼容性问题 此时webpack提供了postcss-loader和对应插件postcss-preset-env 而这两个东西的使用在webpack4和webpack5有些许不同 rules: [{ test: /\.css$/, use: [ // 'style-loader', \ // 取代
关于postcss-px-to-viewport的使用经验
An_cf的博客
12-31 6379
最近在工作项目使用中新接触到postcss-px-to-viewport，在使用上遇到一个坑，也有段时间没更新啦，记录分享一下~希望对你有所帮助！ 直接上重点，节省在网站苦苦寻找有效答案的你 >>> 我所遇到的坑： 由于项目需要，需要适配不同分辨率的终端设备，比如我接到的项目需求是1920*1080以及1200*1920；如果使用过postcss-px-to-viewport的话，我们知道适配一种尺寸在配置时设置viewportWidth就可以，那如果适配两种呢？ 一开始我想到的是
CSS使用伪类控制边框长度
胖太乙
12-14 4694
前言： 如图：我们需要实现一个边框长度比容器长度小一些的边框时，以往大多数都是使用div嵌套。现在只需要使用伪元素就可以实现这个效果，并且使用起来很方便。
CSS border边框（理解网页边框制作）
最新发布
百赢出品，必属精品
04-25 5452
边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）
HTML-div盒子模型
主营前端方向，技术栈是vue
11-09 4994
div盒子模型(边框的border-width宽度，border-color颜色，border-style样式，上右下左四个边框以及简写、内联元素盒子)
CSS基础学习--9 边框（Border）
yyxhzdm的博客
06-12 2630
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。上面的例子用了很多属性来设置边框，你也可以在一个属性中设置边框。边框样式属性指定要显示什么样的边界。
CSS3实现多重边框
CH_Y的博客
10-17 1355
在CSS中使用box-shadow与outline（轮廓）两种方案实现多重边框。但是outline 只能适用于双层边框的场景，不能通过逗号分隔多个值，如果说想要更多层的边框，使用box-shadow就是我们唯一的选择了。
css基础--border属性
chujinmaolu的博客
06-17 8145
1、border不支持百分比 border-width还支持若干关键字， thin：薄薄的，等同于1px。 medium（默认值）：薄厚均匀，等同于3px。 thick：厚厚的，等同于4px。 border属性的默认宽度大小是medium， 2、border-style:默认none; 实现一个没有下边框的边框效果： div { border: 1px solid; border-bottom: none; } 或者 div { border: 1px solid; border-bottom: 0; }
css-边框（border）
qq_54282411的博客
03-29 7095
一、边框（border） 设置边框样式（border-style） 用于定义页面中边框的风格，常用属性： none：没有边框线，即忽略所有边框的宽度（默认值） solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，常用属性： border-top-style：上边框样式 border-right-style：右边框样式 border-bottom-style：下边框样式 borde
ThingsBoard入门实战（一）：物联网平台 ThingsBoard 简介
热门推荐
AIGC搞起
12-06 4万+
文章目录物联网平台 ThingsBoard 简介一、简介1. 背景2. 物联网平台 ThingsBoard二、安装三、探索1. 用户2. 设备3. 模拟发送遥测值四、下一步 物联网平台 ThingsBoard 简介 一、简介 1. 背景 最近很多做设备的朋友和我说，设备接入物联网并进行可视化管理存在困难，主要是以下两点： 一方面，接入物联网平台需要花费大量的时间精力金钱。而且适用性不强，也就是说如果加入新的设备，就需要大量的改动。同时由于没有专业的可视化人员，可视化方面更是一塌糊涂。 另一方面，目前各大厂的
css-border-effects.zip
11-25
css-border-effects.zip 是一个包含了不同的CSS边框效果的压缩文件。在这个压缩文件中，包含了一些常见的CSS边框效果，比如圆角边框、阴影边框、边框动画等等。这个压缩文件可以帮助开发者快速地实现各种炫酷的边框效果，而不需要从零开始编写CSS代码。 使用这个压缩文件的方式非常简单，首先需要解压缩这个文件到项目的CSS文件夹中。然后，在HTML文件中引入相应的CSS文件即可。接着，开发者可以直接在自己的元素中应用这些边框效果的类名，就能够看到效果了。比如，可以使用类名 "rounded-border" 来实现圆角边框，使用类名 "shadow-border" 来实现阴影边框。 除了提供现成的CSS边框效果外，这个压缩文件还包含了相关的文档和示例，可以帮助开发者更好地理解和使用这些效果。同时，这些效果也都是响应式的，可以很好地适配不同屏幕尺寸和设备。 总的来说，css-border-effects.zip 是一个非常实用的工具，可以帮助开发者节省时间和精力，快速实现各种炫酷的CSS边框效果。无论是个人项目还是企业项目，都可以从中受益。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值