border，border-width不支持百分比

最新推荐文章于 2022-06-23 21:32:24 发布
转载 最新推荐文章于 2022-06-23 21:32:24 发布 · 210 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/GumpYan/p/7606958.html

本文探讨了CSS中border-width属性的使用限制，包括不支持百分比设置的原因及特殊情况，并介绍了关键字thin、medium和thick的具体表现效果。此外，文中还提到了border样式为double时的最小宽度要求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.border-width不支持百分比

原因：不会因为设备大就按比例变大

同样的，outline，box-shadow，text-shadow也不支持百分比

也就是border不支持百分比

2.border-width还支持关键字

如：thin，medium（默认值），thick

thin：薄薄的，1px

medium：薄厚均匀，3px

thick：厚厚的，5px

注意：border-style:double至少3px才有效果

转载于:https://www.cnblogs.com/GumpYan/p/7606958.html

詹小布
关注
CSS border-width 属性使用教程
09-25
`border-width`属性在所有现代浏览器中都是完全支持的，包括IE8及更高版本。因此，你可以安全地在你的项目中使用它，无需担心浏览器兼容问题。 总结，`border-width`是CSS中一个强大且灵活的工具，它使得你可以对...
iOS下border-image不起作用的解决办法
08-30
在iOS设备上，有时开发者会遇到`border-image`样式不生效的问题，这通常是由于浏览器的兼容性或特定的渲染机制导致的。`border-image`是一个非常有用CSS3属性，允许我们使用图像来创建复杂的边框效果，而不仅仅是...
border之border-width不支持百分比
郑志雄
03-29 4205
border-width不支持百分比在css中margin，padding是支持百分比的，但是border-width却不支持百分比，为什么margin，padding是可以支持的呢，只能从语义去分析border-width的属性意义呢，如手机屏的边框是5px,如果将手机屏幕放大到电脑屏幕那样的尺寸，不应该随着电脑屏的增加而增加，边框仍然应该是5px.当然css类似的属性还有box-shadow,t
html中百分比的使用,html – CSS – 如何在`border- *`属性中使用百分比？
weixin_39685697的博客
06-11 304
我有使用Twitter Bootstrap 3的代码,使用右箭头导航,我使用border- *属性创建.但是,如果我在右箭头中使用非常长的文本,它不会扩展,如果我使用百分比,代码将无法正常工作……A long long textSmall textA long long long long long long long long long textSmall text 111.custom-nav...
HTML边框百分比,如何设置百分比的边框粗细？
weixin_39548193的博客
06-20 311
郎朗坤边框不支持百分比...但仍有可能...正如其他人指出的CSS规范，边框不支持百分比：'border-top-width','border-right-width','border-bottom-width','border-left-width' Value: | inherit Initial: medium Applies to: all ...
border radio绘制圆形 百分比 border-radius:50%
ISaiSai的专栏
09-15 7769
border-radius: 50%;
为什么border-width不支持百分比
zhm0303的博客
01-03 2324
border-width不支持百分比的原因大概是，边框一般不会根据比例进行缩放，就像手机的边框和电脑的边框其实差不了多少 border-width不支持百分比，但是支持关键字，thin（1px），medium（默认3px） ,thick(5px).
border-top-width
05-09
border-top-width 是CSS中用于设置元素顶部边框宽度的属性。它可以取值为像素、百分比、em等单位，也可以设置为thin、medium、thick等预定义值。比如，设置元素顶部边框宽度为1像素可以使用以下代码： ``` border-...
内层有一个input和一个div，我想让div居中，我外层div的css如下，background-color rgba(0, 0, 0, 0) border-bottom-color rgb(229, 229, 229) border-bottom-left-radius 10px border-bottom-right-radius 10px border-bottom-style solid border-bottom-width 1px border-image-outset 0 border-image-repeat stretch border-image-slice 100% border-image-source none border-image-width 1 border-left-color rgb(229, 229, 229) border-left-style solid border-left-width 1px border-right-color rgb(229, 229, 229) border-right-style solid border-right-width 1px border-top-color rgb(229, 229, 229) border-top-left-radius 10px border-top-right-radius 10px border-top-style solid border-top-width 1px box-sizing border-box color rgb(95, 95, 95) cursor pointer display flex font-family "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif font-feature-settings normal font-kerning auto font-optical-sizing auto font-size 14px font-stretch 100% font-style normal font-variant-alternates normal font-variant-caps normal font-variant-east-asian normal font-variant-ligatures normal font-variant-numeric normal font-variant-position normal font-variation-settings normal font-weight 400 height 70px left 0px line-height 28px margin-bottom 0px margin-left 0px margin-right 0px margin-top 0px padding-bottom 12px padding-left 12px padding-right 12px padding-top 12px position relative text-wrap wrap top 0px unicode-bidi isolate user-select none vertical-align middle white-space-collapse collapse width 300px z-index 10 -webkit-tap-highlight-color rgba(0, 0, 0, 0)
最新发布
03-26
- 如果内层div需要自适应外层尺寸，可添加`flex: 1`或调整`width/height`百分比 #### 完整代码演示 ```html 测试内容 ``` ```css .parent { display: flex; justify-content: center; /* 水平居中 */ ...
深入理解css3的border边框
小平果的欢乐谷
12-12 1731
深入理解css之border本博客深入讲解CSS3中的border属性，深入介绍border-color之间的关系，以及border与background定位、border与透明边框，并教你如果使用border进行图形构建，以及如何借助border使用有限标签完成我们的布局。1.border-width不支持百分比值本来width,padding和margin都支持百分比，为何就是border-wi
border的一些理解
yangchunshang的博客
10-29 3099
1、border-width （1）border-width不支持百分比，受其本身的语义和使用场景决定的。border 没有继承性，如果使用百分比，那么就没有参考对象，浏览器解析就不知道 百分数应该乘以谁来确定边框的宽度，所以只能用指定值的大小来确定。 （2）border-width还支持关键字：thin(1px),medium(默认值，3px),thick(5px) （3）为什么默认设置...
深入了解 border
p1967914901的博客
06-23 1016
盒尺寸中的 4 个盒子 content box、padding box、border box 和 margin box 分别对应 CSS 中的 、、和 属性，本文我们的主角是 border box。下面我们一起看看 都有哪些精彩的特性表现。虽然同属盒模型基本成员，但是 却不支持百分比。例如，设置： 是无效的，直接声明无效。这一点和 和 都不一样，下面问题来了：为什么 不支持百分比呢？顾名思义， 是“边框宽度”，我们先来看看现实世界的物体的边框，假设我们现在有两台数码设备，分别是 iMac 和 i
border的深入理解
女神修炼日记
01-27 502
一、border-width不支持百分比  原因是受语义和场景限制的，所谓边框是不会因为设备大就按比例大小的。border-width支持关键字：thin，medium，thick，但是IE7除外。 二、border-style 类型  Chrome/Firefox下，虚线宽高比为3:1，但是在IE下宽高比则为2:1； border-style:dotted虚线，在Chrome/Fir
带border的响应式布局
ITBwy的博客
09-23 909
击败边框：带border的百分比布局   (2013-12-03 14:00:06) 转载▼   分类： html,css 响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你
带border的百分比布局
weixin_33747129的博客
09-01 493
2019独角兽企业重金招聘Python工程师标准>>> ...
使用百分比来指定border-radius边框半径的值
qq_37499398的博客
04-28 1352
Make Circular Images with a Border Radius除了像素，你还可以使用百分比来指定border-radius边框半径的值。给你的猫咪图片一个50%的border-radius。
html百分比实现边框而不挤出
qq_36321281的博客
10-11 1225
这是两个层，每个占了50%的宽。 假如我们想给它加上个黑色边框，那么效果是这样子的。 很明显，第二个层因为border的原因被挤到了下一层。 那么如何给满宽度的元素设置边框而被挤出呢？ 可以给它加上box-sizing:border-box; 最终的效果 源代码如下：<html> <head> <style> *{margin:0p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值