CSS3其他特性

最新推荐文章于 2022-03-07 23:33:23 发布
最新推荐文章于 2022-03-07 23:33:23 发布
阅读量55 收藏
点赞数
分类专栏： # CSS 文章标签： css3 其他 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_28317385/article/details/120694421
版权

目录

图片变模糊

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter：函数(); 例如:filter:blur(5px); blur模糊处理 数值越大越模糊

网址说明：developer.mozilla.org/zh-CN/docs/Web/CSS/filter

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片模糊处理filter</title>
    <style>
        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(15px);
        }
        /*经过就变得清晰*/
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
   <img src="images/pink.jpg" alt="">
</body>
</html>

在这里插入图片描述

计算盒子宽度width:calc函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width：calc(100%-80px);

括号里面可以用+ - * /来进行计算。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="icomoon/style.css" rel="stylesheet">
		<style type="text/css">
            .father {
                width: 300px;
                height: 200px;
                background-color: pink;
            }

            .son {
                 /* width: 150px; */
                /* width: calc(150px + 30px); */
                width: calc(100% - 30px);
                height: 30px;
                background-color: skyblue;
            }
		</style>
	</head>
	<body>
        <!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
	</body>
</html>

在这里插入图片描述

安澜仙王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3的calc()使用
weixin_33966365的博客
09-13 1294
2019独角兽企业重金招聘Python工程师标准>>> ...
css的filter方法，给图片添加滤镜
Cupid
09-23 1067
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width...
css实现高斯模糊（毛玻璃效果）
zhangxiaodui的博客
12-01 3539
场景 昨天设计走查我们做的成果时，有一个弹窗的毛玻璃效果还原度不高，要求有元素拖到毛玻璃后面的时候，这些元素也是模糊的。 我最开始在蓝湖右侧复制的代码，用了background渐变，最重要的是使用了filter: blur(15px);但是发现最终的效果并没有使毛玻璃后面的元素变得也模糊，只是背景变高斯模糊了。 当时我在想，我就是按照设计给的色值做的呀，高斯模糊不就是filter吗，也是15px呀。并没有觉得是自己用的不对的问题。 想要实现的效果如下图 解决 本来这个效果是我暂时代替同事写的，然后同事有时
解决使用filter: blur时图片四周泛白的问题
xi1213的博客
03-07 1630
发现问题 在使用filter: blur(15px)模糊背景图时，发现图片周围会泛白。 解决问题 查了好多办法： 1、使用StackBlur.js处理图片模糊。 2、改变background-size：cover为background-size:150% 150%。 3、给body添加同样的背景图。 4、直接使用transform: scale(1.2);。 总结 使用第四种办法最方便，不用引入其他包，不用再次引入图片。 ...
CSS3属性calc函数（CSS3）
...
08-16 113
CSS3属性calc函数（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
1.07 css3新特性
最新发布
10-07
本资源摘要信息主要介绍CSS3的新特性，包括CSS3的介绍、CSS3选择器、CSS3文本、CSS3边框、CSS3背景、CSS3颜色、CSS3渐变、CSS3盒模型等。 CSS3介绍 CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，...
深入了解CSS3新特性
07-22
资源名称：深入了解 CSS3 新特性资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
css3新特性.png
03-17
CSS3新特性，带你一小时学完CSS3
CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)
qq_37613840的博客
12-28 9725
CSS毛玻璃效果可以通过filter: blur()实现，类似PS高斯模糊，图片和背景都可以使用；但在移动端，会造成卡顿，不建议在移动端使用； CSS: .blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(
CSS: filter: blur(); 实现高斯模糊效果，不可不知的细节优化
热门推荐
weixin_39015132的博客
07-24 9万+
原文链接 前言 在项目中，要实现如下的效果： 页面顶部的设计稿，前面一个卡片式的轮播，后边的背景（是椭圆的一部分）取前面的图片，进行一个高斯模糊的处理。 开始 前面的轮播部分，使用了第三方的轮播插件，非常好用，推荐给大家（地址）。轮播，不作为今天的主要内容，暂时简单描述下，有机会再详细讲解。有兴趣的同学可以自己试一试，根据插件提供的功能，进行一些样式调整即可。 现在开始分析后面背景...
filter:blur() 实现毛玻璃效果
longshelan_113的专栏
01-03 1万+
使用玻璃效果比普通效果中的文字更易阅读，而且整体美观。在过去，我们通常把文本框区域的背景做模糊处理，随后使用一整张背景。不仅消耗性能，而且在HTML方面难以修改维护。以下是HTML片段 "The only way to get rid of a temptation is to yield to it. R
filter: blur() 高斯模糊效果
kangkang_style的博客
03-21 3971
比较喜欢的效果实例： <div class="lbg"> <img src="../../assets/01.jpg" class="test-img"> </div> .lbg{ /* 设置相对定位 */ position: relative; /* 宽度120%，-10%让元素集中 */ lef...
CSS filter属性详解
ZhuAiQuan的博客
05-06 5925
MDN filter介绍 filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。filter定义的10种效果分别是：blur、opacity、grayscale、sepia、saturate、hue-...
CSS——滤镜（filter ）
YANGMENGZHENG的博客
10-27 3888
前言 滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。 一、什么是滤镜 对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。 二、滤镜的实现---filter属性 1、CSS语法 filter: none | blur() | brightness(.
CSS圆角边框
岁月的博客
08-11 1300
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius属性用于设置元素的外边框圆角 语法: border-radius:length; radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是个矩形，设置为高度的一半就可以做类似下图 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角 分开写:b.
CSS溢出的文字省略号显示
岁月的博客
08-30 728
目录1.单行文本溢出显示省略号--必须满足三个条件2.多行文本溢出显示省略号 1.单行文本溢出显示省略号–必须满足三个条件 /* 1.先强制一行内显示文本 */ white-space: nowrap;（默认normal自动换行） /* 2.超出的部分隐藏 */ overflow: hidden; /* 3.文字用省略号替代超出的部分 */ text-overflow: ellipsis; 代码： <!DOCTYPE html> <html> &lt
CSS 2D转换
岁月的博客
11-13 680
转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果，转换你可以简单理解为变形 移动:translate 旋转:rotate 缩放:scale 二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 2D转换之移动translate 2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位 1,语法 transform: translate(x,y);或者分开写 transform: translateX(n);
CSS元素的显示与隐藏
岁月的博客
08-15 450
类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 本质：让一个元素在页面中隐藏或者显示出来。 1.display显示隐藏 2.visibility显示隐藏 3.overflow 溢出显示隐藏 display属性 display属性用于设置一个元素应如何显示 display:none;隐藏对象 display:block;除了转换为块级元素之外，同时还有显示元素的意思 display隐藏元素后，不再占有原来的位置 后面应用及其广泛，搭配JS可以做很多的网页特效。 <!DOCT
CSS 3D转换
岁月的博客
11-28 422
3D移动在2D移动的基础上多加了一个可以移动的方向，就是Z轴方向。 translform:translateX(100px):仅仅是在X轴上移动 translform:translateY(100px):仅仅是在Y轴上移动 translform:translateZ(100px):仅仅是在Z轴上移动(注意：translateZ一般用px单位) translform:translate3d(x,y,z):其中x,y,z分别指要移动的轴的方向的距离 代码示例： <!DOCTYPE html> .
CSS3新特性：表格属性与应用
"本资源主要介绍了CSS3中的表格属性，包括背景色、边框间距、标题位置、空单元格显示、高度、内边距、布局...CSS3的表格属性和其他特性为开发者提供了更多的设计自由度，使他们能够创造出更具吸引力和用户体验的网页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安澜仙王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值