[CSS]《CSS揭秘》第四章——视觉效果

AWang 发布于2019-08-30 15:54 / 3497人阅读

摘要：投影单侧投影邻边投影双侧投影模糊距离阴影尺寸不规则投影滤镜可接受的参数基本上跟属性是一样的，但不包括扩张半径，不包括关键字，也不支持逗号分割的多层投影语法毛玻璃效果折角效果

投影 单侧投影

box-shadow:0px 10px 10px -5px black;

邻边投影

box-shadow:10px 10px 10px 2px black;

双侧投影

box-shadow:10px 0px 10px -10px black,
          -10px 0px 10px -10px black;

box-shadow: h-shadow v-shadow blur/*模糊距离*/ spread/*阴影尺寸*/ color inset;

不规则投影

filter:drop-shadow() grayscale blur();

*：drop-shadow() 滤镜可接受的参数基本上跟 box-shadow 属性是一样的，但不包括扩张半径，不包括 inset 关键字，也不支持逗号分割的多层投影语法

毛玻璃效果

body,main::before{
    background: url(./1.jpg) 0 / cover fixed;
}
main{
    background: hsla(0, 0%, 100%, .3);
    width: 200px;
    height:    200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

main::before{
    content: "";
    position: absolute;
    top:0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    filter: blur(20px);
    margin: -30px;
}

折角效果

......

云服务器 GPU云服务器 css效果效果显示 css jquery 气球css js效果 js和css效果图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116807.html

css揭秘笔记——视觉效果

摘要：实现染色效果的混合模式是，它会保留上层元素的高亮信息，并从它的下层吸取色相和饱和度信息。当我们只有一个背景图像及一个透明背景色时，就不会有任何混合效果。投影知识点 box-shadow: [inset]? 注意：在元素正下方的投影被裁切掉了，是没有的；而text-shadow不同，文字下方的投影不会被裁切。 box-shadow的第三个参数是模糊半径，假如设置4px...

skinner 2019-08-29 13:48 评论0 收藏0
css-secrets (css揭秘) 知识点目录，值得深入学习！

摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧第二章边框与背景半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 评论0 收藏0
《CSS揭秘》：切角效果

摘要：切角效果切角效果是一种常见的视觉风格设计。但是现在在里，依然无法简单的生成切角效果。原文位于揭秘切角效果。裁切路径方案使用裁切路径可以在裁切任意多边形，下面的代码可以切除和上文一样的效果。改变切角深度时需要同时改变个地方。切角效果切角效果是一种常见的视觉风格设计。但是现在在CSS里，依然无法简单的生成切角效果。 css渐变使用CSS渐变[linear-parent][1]可以形成...

JerryZou 2019-08-29 11:18 评论0 收藏0
css编码技巧【css揭秘读书笔记】

摘要：最近在看揭秘，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。举例说明以上的代码有什么问题呢如果需要改变字号，那么同时需要调整行高。那么经过修改后的代码如下关于使用还是还是百分比，需要根据具体情况来决定。最近在看《css揭秘》，于是写了文章来作笔记，除此以外还会补充一些自己遇到的笔试题。希望大家都有所收获。 css编码技巧尽量减少代码重复在实践中，代码可维护性的最大要...

Miyang 2019-08-30 12:59 评论0 收藏0
CSS揭秘之多重边框

摘要：多重边框的两种实现方案以由逗号分隔的列表来描述一个或多个阴影效果。轮廓与边框在以下几个方面存在不同轮廓不占据空间，它们被描绘于内容之上轮廓可以是非矩形的。是元素的轮廓，悬浮在元素边框之上。也就是说，它们之间的颜色会继承父元素的背景色。多重边框的两种实现方案： border-shadow outline Mutiple border ...

liuyix 2019-08-30 11:08 评论0 收藏0