box-shadow

Strange Box-shadow bug on Chrome 51 while scrolling

由 余生长醉 提交于 2019-12-04 14:28:45
So while making a website I discovered a strange box-shadow bug on Chrome 51, my website has a fixed header with a box-shadow , and when I scroll up or down the box-shadow leaves some marks (horizontal gray lines) : Also I can't reproduce this bug on a jsfiddle ( link of the fiddle ) and on other browsers like Firefox or Internet Explorer. Is it a bug? What could be the problem? UPDATE 1 It seems to work on Chrome 49 I encountered this bug. I don't know what causes this but here's a simple way to fix it: Add 0.1px to the shadow's blur box-shadow: 0 2px 0.1px #yourcolor; The lines should

Custom shadow with CSS

由 99封情书 提交于 2019-12-04 07:14:48
问题 How do I make a shadow per the image below? I don't have any idea how to do that. 回答1: One way you can do it is by styling the pesedo elements ::before and ::after like this: div { width: 300px; height: 400px; background: #FFF; margin: 40px auto; position: relative; } div::before, div::after { z-index: -1; position: absolute; content: ""; width: 50%; height: 50%; right: 10px; top: 10px; max-width: 300px; background: #777; box-shadow: 15px 0px 10px #777; transform: rotate(3deg); } div::after {

Hexo之Next主题美化代码

由 我只是一个虾纸丫 提交于 2019-12-04 05:53:37
我分别美化了几个不同版本的Next主题，这里把美化代码公布出来，第一种Next版本小于7.3可使用，美化效果如下。 直接修改 \themes\next\source\css\_custom 将以下美化过程复制到 custom.styl 目录即可。 // ************************************************************************************************ // 全局布局美化代码 (包括,主页背景颜色,主页透明度等全局配置) // By: lyshark www.blib.cn lyshark.cnblogs.com // ************************************************************************************************ // 添加主页背景图片与背景颜色 /*body { // background:url(https://source.unsplash.com/random/1600x900); background:url(/images/background.jpg); background-repeat: no-repeat; background-attachment:fixed;

博客园页面定制 CSS 代码

由 僤鯓⒐⒋嵵緔 提交于 2019-12-04 04:58:14
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page title</title> </head> <body> </body> </html> #EntryTag { margin-top: 20px; font-size: 9pt; color: #808080 } .topicListFooter { text-align: right; margin-right: 10px; margin-top: 10px } #divRefreshComments { text-align: right; margin-right: 10px; margin-bottom: 5px; font-size: 9pt } * { margin: 0; padding: 0 } html { height: 100% } body { color: #999; background-color: #21252b; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } table { border-collapse: collapse; border-spacing: 0

CSS box-shadow shadows

由 亡梦爱人 提交于 2019-12-04 04:40:18
For practice and fun, I am seeking to recreate the following logo in pure CSS in one element If you notice, each "bar" has a small, shadowed grey area, which gives it a sense of depth. I'd like to create these in pure CSS, if possible. The tricky thing to me is that it looks like they go behind bars on top of them, so it'd have to be on an individual bar level in order to do that as opposed to applying a mask to the whole thing. Thus far, I have been able to create the bars using a pseudo-element and some box shadows and have given the B the colors using a gradient and background-clip: text .

CSS Triangles and box-shadows

由 十年热恋 提交于 2019-12-04 02:42:44
问题 I got the below image done with CSS: As you can see, the triangle has a gap that cuts the box-shadow from the tooltip. The code is the following: /* Generated by less 2.5.1 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Demo of the tool-tip CSS */ .tooltip { text-decoration: underline; color: #37b9b5; cursor: default; } .tooltip-bubble { position: absolute; z-index: 1; padding: 5px 10px; color: #fff; width: auto; box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3); background

一些影视作品

由 浪尽此生 提交于 2019-12-03 22:47:48
一些影视作品 - 博客园 ​ ``` ``` */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ */ /*--> */ 一些影视作品 ``` ``` ``` .item-rows { display: flex; flex-wrap: wrap; align-items: center; margin: auto; } .item { background-color: #FFF; border-radius: 4px; border: 1px solid #ddd; width: 260px; /*height: auto;*/ padding: 0px; margin: 10px; } .item:hover { border-color: rgba(82, 168, 236, .8); outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6); } .item p { /*margin-bottom: 0!important;*/ line-height: 32px; text-overflow: ellipsis !important; overflow:

一步步打造自己的纯CSS单标签图标库

由 倖福魔咒の 提交于 2019-12-03 13:14:33
图标作为网页设计中的一部分，其在凸显网页重要元素特性，视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点，在项目实践时不宜将每个图标作为单个图片元素进行加载，这会增加Http请求，影响网页的性能。因此，在实际中，我们可能见到以下一些常见的解决方案： 将多个图标按照一定排列顺序合并在一个图片里（即 sprite图 ），再通过CSS设置元素的 background-position 来为元素设置背景从而展示图标 将单个图标元素转成 base64 格式，并在CSS声明背景 使用 SVG 来绘制图标 使用字体图标 使用CSS来绘制图标 ... 以上方式都可以很好的实现功能，各有各的优缺点。在移动端的某些情况下，我个人比较偏好使用CSS来实现一些简单的小图标，原因有以下几点： 适应性和定制性强，如可以随意改变颜色，大小 占用空间小 在移动端兼容性高 可以不断使自己熟悉CSS3的各个属性并得以应用 而由于CSS3的普及和在各大浏览器的不断增强支持，使CSS具有更大的可能性和能力去绘制更多样化，更复杂的图标。当然，也有不少人反对web图标使用CSS绘制的，在这里不加以讨论。如果你也反对，不妨以当乐趣的心态去看待。 本文将单独讲解如何用CSS绘制一些图标。而由于用CSS实现图标绘制，偶尔意味着你需要用更复杂的html结构去支持图标的绘制，所以本文讲解的将是

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

由 拥有回忆 提交于 2019-12-03 13:08:25
通过CSS选择器找到元素，就要使用CSS属性给找到的元素设置样式。尽管现在的浏览器已经支持了众多的CSS3属性，但作为初学者，最应该关注的就是一些“主流”的属性，如border-radius、box-shadow、transform等。它们有良好的文档、极佳的测试效果并且经常用到，将成为你设计网站的得力助手。学习CSS3的属性就要先从主流的属性开始，其他属性则可通过CSS3手册获得帮助。具体实例展示，读者可以在下一章大量学习。本节主要学习CSS3属性的用法及兼容性。 1 使用CSS3属性前的准备 虽然目前主流的浏览器大多不支持CSS3的大多数属性，但还是鼓励读者在前端开发中要学会并且运用这些CSS3属性，因为这是未来的发展趋势。关键是首先要确定你是否对各个浏览器之间的细微差别有所了解，你能肯定地说IE显示的90°角就不圆滑吗？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在使用CSS3的一些高级特性时，需指定所有浏览器的前缀。CSS3的前缀是一家浏览器生产商经常使用的一种方式，它暗示该CSS属性或规则尚未成为W3C标准的一部分。CSS3前缀的浏览器属性规则如表1所示。 表1 CSS3前缀的浏览器属性规则 既然CSS3代码中（暂时）需要写上这么多前缀，就需要注意顺序问题，要先写私有的CSS3属性，再写标准的CSS3属性。如果以后当一个属性成为标准

学习笔记css3

由 不问归期 提交于 2019-12-03 09:50:06
边框 　 　盒子圆角　　border-radius：5px / 20%； 　　　　　　　　border-radius:5px 4px 3px 2px; 左上，右上，右下，左下 　　盒子阴影　　box-shadow：box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式 　　　　　　　　　　　　　　注意：inset 是指阴影在盒子内部，默认在外部，inset写到第一个或者最后一个参数位置，其他位置是无效的 　　　　 　　　　值有3个时，表示距离左侧、距离上侧、影子颜色 值有4个时，表示距离左侧、距离上侧、虚化的像素、影子颜色 　　　　　　　　值有5个时，表示距离左侧、距离上侧、虚化的像素、影子颜色、是否显示在内部并且将颜色进行反转 　　　　　　　　负值时，在相反的方向 背景 　　背景尺寸 background-size auto默认值，不改变图片的大小 长度值 200px 50px 代表宽高依次是200 50　　百分比 同长度值 cover填充整个外层容器 　　背景平铺　　background-repeat 　　背景位置　　位置定位1（background-origin） 根据文本位置：content-box 根据边框位置：border-box 根据内边距位置:padding-box 使用这个属性，必须设置背景为no
订阅 box-shadow