css 动态计算宽高、添加背景边框

CSS技巧：动态尺寸与背景边框
最新推荐文章于 2024-05-17 15:18:38 发布
原创 最新推荐文章于 2024-05-17 15:18:38 发布 · 452 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用CSS的calc函数动态计算元素的宽度和高度，并演示了一个复杂的背景边框效果实现方法，通过多个线性渐变叠加来创建独特的四角装饰。

1.动态计算宽高

  width: 100%;
  height: calc(100% - 40px);   //-号两旁必须加空格

 

2.添加背景边框(4个小角角)

background: linear-gradient(to left, #23fff8, #23fff8) left top no-repeat,
                linear-gradient(to bottom, #23fff8, #23fff8) left top no-repeat,
                linear-gradient(to left, #23fff8, #23fff8) right top no-repeat,
                linear-gradient(to bottom, #23fff8, #23fff8) right top no-repeat,
                linear-gradient(to left, #23fff8, #23fff8) left bottom no-repeat,
                linear-gradient(to bottom, #23fff8, #23fff8) left bottom no-repeat,
                linear-gradient(to left, #23fff8, #23fff8) right bottom no-repeat,
                linear-gradient(to left, #23fff8, #23fff8) right bottom no-repeat;

background-size: 6px 60px, 60px 6px, 6px 60px, 60px 6px;

CSS backdrop-filter：给元素背景添加模糊与色调的高级滤镜
探索技术与生活
08-19 1555
backdrop-filter是CSS中实现毛玻璃效果的核心属性，通过模糊元素背后的背景内容（而非元素自身）来提升界面质感。与filter不同，它能保持元素内容清晰，常用于导航栏、模态框等半透明组件。支持多种滤镜函数（如模糊、亮度、对比度调整），并可组合使用创建复杂效果。典型应用包括：毛玻璃导航栏（半透明背景+模糊）、弱化背景的遮罩层、卡片悬停特效等。需注意元素需设置半透明背景且背后有内容才能显现效果。该属性能显著增强UI的视觉层次感和现代感。
CSS3全屏彩色水泡泡背景特效
07-24
JavaScript可以通过生成随机数来决定气泡的初始位置和大小，而`calc()`函数可以在CSS中进行动态计算，使得气泡的坐标和尺寸具有不确定性，从而达到自然的效果。 此外，为了实现全屏背景，我们可以设置body或特定...
css动态计算宽高
止水
01-09 1637
css3动态计算元素的高度及宽度 1、px 　　像素，我们在网页布局中一般都是用px。 2、百分比 　　百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了 3、Viewport 当已知一个div的高度时，它的同胞div高度是根据窗口高度减去已知div高度而得到，此时就需要calc函数 　　viewport：可视窗口，也就是浏览器。 　　vw Viewport宽度， 1vw...
如何在css中动态的计算元素的宽度
weixin_42851750的博客
05-17 1409
在CSS中，我们经常需要为元素设置特定的长度值，如宽度、高度、边距和填充等。然而，随着现代网页设计的不断发展，固定的长度值已经不能满足所有的需求。这时，CSS的。
css通过calc动态计算宽度
徐同保的专栏
02-28 1192
css通过calc动态计算宽度
css-动态计算盒子宽度
qq_39111074的博客
08-25 3063
css-计算盒子宽度calc函数 css属性：width: calc() 可以计算盒子的宽度，calc()括号里面可以进行- - -加 减 乘 除 运算 + - * / 1.可以写数值跟数值之间的运算，如：calc(100px + 50px) 2.可以写父盒子的百分比 和 数值 之前的运算，如：calc(100% -50px) 常用方式2，动态计算子盒子宽度，总是比父盒子少多少宽度 代码示例 <!DOCTYPE html> <html lang="en"> <head&gt
css 中动态获取宽度,css中的calc动态计算长度值
热门推荐
weixin_36085931的博客
08-03 1万+
1 场景css的样式中，存在动态计算长度的需求。2 方案使用css中的calc函数动态计算css中的长度值。语法：calc(expression)参数说明：值描述expression必须，一个数学表达式，结果将采用运算后的返回值。3 使用如需将元素设置为父容器的中间，元素大小为200px;100px;传统的通过margin属性，设置负外边距移动自身高度和宽度的一半距离：.context{posit...
css样式div或li在ie6下背景平铺及border边框断线解决技巧
09-22
### CSS样式div或li在IE6下背景平铺及border边框断线解决技巧 #### 一、引言 在Web开发过程中，我们经常会遇到浏览器兼容性问题，尤其是在处理老旧浏览器如Internet Explorer 6（IE6）时。IE6由于其版本较老，对...
纯CSS丝滑边框线条动画
最新发布
09-27
仅使用CSS实现一种丝滑的边框线条动画效果。关键的实现思路包括： 透视效果：通过设置包含两个嵌套元素，父元素有1像素的padding，从而创建出边框效果。 动画制作：创建一个绝对定位的子元素，使用animation属性让...
CSS3背景边框及边距属性的实用案例解析
CSS3作为网页设计和开发的核心技术之一，其在背景、边框和边距属性方面的扩展极大地增强了样式表的灵活性和表现力。本知识点将深入探讨CSS3中关于背景、边框和边距的相关属性，并通过案例进行演示，旨在帮助开发者更...
css中使用calc()计算宽高
liujiujiang的博客
12-19 9902
calc()是什么？ 简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等， calc()语法 calc的语法就是简单的四则运算， 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使...
CSS边框双线样式计算规则
front_endxiaobaia的博客
04-04 509
css calc()函数 动态根据屏幕宽度计算宽度
xujingcheng123的博客
03-08 5614
今天写移动端H5页面，mui按钮在layer mobile 弹窗 html类型的时候，mui按钮宽度设置为100%的时候，mui按钮宽度会超出屏幕，听同事建议，使用 css calc()函数计算得以解决。 菜鸟教程解释calc()函数地址：https://www.runoob.com/cssref/func-calc.html 定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使
CSS 动态计算长度值
qq_37562908的博客
09-27 1646
CSS calc() 函数 之前就一直记得一个函数可以动态计算长度值，可是想用的时候老是想不起来，今天无意翻到做下记录。 需求：有的时候给的宽度是100% 或者 100vh，因为某种原因需要减去固定长100px。 方案：使用css3 新增内容——calc()函数。calculate的缩写 实例： #div1 { position: absolute; left: ...
css尺寸计算法,CSS 框模型尺寸计算
weixin_33501348的博客
08-04 429
框模型默认尺寸在框模型中，如果不加设置，外边距、边框和内边距默认为零，内容尺寸则根据内容实际长度计算。虽然内外边距默认为零，但浏览器通常有其默认的设置。例如，在Firefox浏览器中，ul标签是默认有padding值的，而IE浏览器则没有，如果采用浏览器默认样式的话，就会出现兼容性问题。一般情况下我们通过样式表在基本设定中将内外边距设为零以替代浏览器默认设置：*{margin: 0;padding...
css 设置宽高比例的方式
文杰的博客
07-23 4667
动态rem: https://blog.csdn.net/weixin_49088636/article/details/128798911?这样也可以做到宽高等比，通常用于响应式或大屏开发中，如果有需要，还要将rem做为动态尺寸。利用padding的特性，padding的计算方式是以父级的宽度进行计算的，如果父级没有，则向上继续寻找，找不到则已屏幕宽为准。此属性可直接在元素上设置宽高比，但存在兼容性问题，可在手机端使用。我们可以通过这一属性进行计算。
css - calc 动态计算
weixin_37630796的博客
12-10 657
       用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);(必须) 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则；        兼容性 IE Firefox Chrome ...
css清浮动与动态计算元素宽度
weixin_34413802的博客
04-03 275
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: 0; visibility: hidden; overflow: hidden; } .fl{ float: left; } .fr{ float: right; } css实现超出内容部...
css动态计算元素的高度及宽度
MarryLinDa的博客
04-07 7102
原文：https://www.cnblogs.com/zhang1f/p/12574774.html 1、px 　　像素，我们在网页布局中一般都是用px。 2、百分比 　　百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了 3、Viewport 当已知一个div的高度时，它的同胞div高度是根据窗口高度减去已知div高度而得到，此时就需要calc函数 　　viewport：可视窗口，也就是浏览器。 　　vw Viewport宽度， 1vw 等于viewport宽度的1% 　　vh
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值