今天这篇给大家分享的知识是“CSS常用效果有哪些，实现代码是什么”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“CSS常用效果有哪些，实现代码是什么”文章能帮助大家解决问题。

最近翻阅网上资料，查到了一些自己从未用过的CSS，于是记录下来，在有些时候兴许能用得上。

1、CSS中简单的运算

我们通常用css指定的是静态的结果，而动态结果，如高度，位置等等则需要js来动态进行计算赋值，而其实css自己也能够进行简单的运算，主要是用到了calc这个函数。

.div{ width: calc(100% - 50px); }

2、使用CSS实现文字模糊效果

在PS中我们可以使用滤镜让面前的文字看起来很模糊，这和透明度还不一样，在css中我们也可以实现。

p{ color: transparent; text-shadow: #111 0 0 5px; }

3、使用CSS创建高宽比固定的元素

在前端开发中，尤其是在写响应式布局网页的时候，我们总想要里面的元素保持同样的高宽比，这样可以避免元素变形，而要达到这种目的，我们可以通过给父级元素底部的内边距和子元素绝对定位来实现。

   
        这里面的文字会随着这个div的变化而折行
   

大家可以去试试，找出更多的CSS效果。

CSS3滤镜让图标变灰

首先上html代码：

css代码：

.icon{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);   
filter: grayscale(100%);
filter: gray;
}
.icon:hover{
filter: none;
-webkit-filter: grayscale(0%);
}

这样我们就只需要上传一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果。

text-overflow:ellipsis实现省略号效果

使用这个css样式很简单，只需要三句代码，举例，我们给我们的h3标签添加这个属性：

h3{text-overflow:ellipsis; //省略号形式
    white-space:nowrap;   //所有字符一行显示
    overflow:hidden;      //溢出隐藏
}
需要注意的是，这三句代码缺一不可，不然达不到想要的效果。注意：使用这个属性的元素要给固定宽度，不然怎么会溢出呢。

“CSS常用效果有哪些，实现代码是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Sass和Compass是什么，怎么进行安装

  Sass和Compass是什么？在讲这个之前呢，先介绍下CSS。相信你跟我一样，经过若干段时间的开发后也比较熟悉CSS。但是有一点我们都很清楚，它是一种样式表，并不是一种编程语言。所以，有些童鞋经常说自己最近在学习CSS编程是错误滴。CSS里包含了很多选择器及应用的样式规则，而其中并不包含变量、函数、继承等这些我们在一般 ...

• CSS中如何用Flex布局做柱状图的效果？

  这篇文章给大家分享的是CSS中用Flex布局做柱状图效果的方法。小编觉得挺实用的，因此分享给大家做个参考，对大家学习和了解Flex布局会有帮助，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• CSS样式没作用什么缘故，怎样解决

  这篇文章主要介绍了CSS样式不起作用(史上最全解决方法汇总),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS中元素浮动和清除分别怎样实现

  这篇文章主要介绍了CSS实现元素浮动和清除浮动的方法,简单介绍了浮动的基本知识，通过截图代码的形式给大家介绍了css清除浮动的方法，需要的朋友可以参考下

• 如何用CSS实现折叠纸飞机并飞出去的动画？

  大家童年都有折过纸飞机的吧，今天我们就来看看如何用代码来实现。文中分享的示例用CSS+JS实现了折叠纸飞机并飞出去的动画效果，实现效果及代码如下，感兴趣的朋友接下来就跟随小编往下看吧。