box-shadow | 易学教程

【css】文字阴影与盒子阴影

阅读更多关于【css】文字阴影与盒子阴影

box-shadow 盒子阴影 box-shadow : x y blur spread color type ; x 轴偏移量正值向右，负值向左 y 轴偏移量正值向下，负值向上 blur 阴影大小（模糊程度）只可为正值，值越大阴影的边缘就越模糊 spread 阴影扩展:阴影开始模糊的位置，可为负值 color 阴影颜色 type 阴影投射方式外阴影 outset （默认）内阴影 inset 示例1 box-shadow : 0 3.5px 7px 3px #3F78f8 ; 示例效果图 chrome详解图 box-shadow 示例2 div { box-shadow : 0 8px 8px rgba ( 202,12,22,.24 ) , 0 0 8px rgba ( 202,12,22,.12 ) ; } 示例效果图 box-shadow text-shadow 文字阴影 text-shadow : x y blur color ; x 轴偏移量正值向右，负值向左 y 轴偏移量正值向下，负值向上 blur 模糊半径，正值，从出现到消失的长度 color 阴影颜色支持阴影叠加示例 p { text-shadow : 5px 5px 20px red, 15px 15px 20px orange ; } 示例效果图 text-shadow 来源： CSDN

博客园美化

阅读更多关于博客园美化

首先，需要在博客园里申请JS权限，成功后会在博客侧边栏公告那行看到有支持JS代码的一句话现在开始美化博客首先，个人认为darkgreentrip比较好看，不太暗，也不刺眼，所以下面一段页面定制代码是针对darkgreentrip的，喜欢其他主体也可以照这个代码改 function() { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e("script"), o = t.length, i = t[o - 1]; return { l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99) } } function o() { a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document

emacs org-mode文件转html文件

阅读更多关于 emacs org-mode文件转html文件

Table of Contents 1. 发布站点 by emacs org-mode 1.1 org-mode 自带的导出方法 1.2 批量导出 1.3 css 美化 1.4 导出html 1. 发布站点 by emacs org-mode org-mode 写文档做笔记啥的很方便, 反应超快(因为是文本文件), 而且在emacs中可以显示出类似word的效果. 但是给没有emacs的人看时, 就不太方便.(没有高亮显示, 也无法在文本中跳转等等) 为了将继续使用 org-mode 带来的便利, 也为了方便别人查看自己的文档, 稍稍调查了一下org-mode导出html的功能. 1.1 org-mode 自带的导出方法强大的org-mode其实自带了导出各种格式的功能. 导出html格式的快捷键很简单: C-c C-e h 虽然方便, 但是导出的html格式不太好看, 而且不能批量导出, 这个命令只能导出一个org文件. 1.2 批量导出 org-mode虽然也有导出org project的命令, 但是需要在 .emacs中配置相关导出选项. 每次导出不同的项目时, 需要修改 .emacs, 修改 .emacs后要么重新导入, 要么重启 emacs. 总觉得很麻烦. 后来参考了博客园上[麦满屯]的一篇博客 1 , 用Makefile来简化 org 文件的导出和发布.

小总结

阅读更多关于小总结

关于safari 浏览器 input圆角的解决方案去除iOS safari 浏览器的input的圆角问题 -webkit-appearance: none; border 阴影 .shadow--2dp{ box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); } .shadow--2dp { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12) } .shadow--3dp { box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12) } .shadow--4dp { box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2) } .shadow--6dp { box-shadow: 0 6px 10px 0 rgba(0,0

How to add box-shadow to a CSS div with display:table-row? [duplicate]

阅读更多关于 How to add box-shadow to a CSS div with display:table-row? [duplicate]

问题 This question already has answers here : Box Shadow on table row not appearing on certain browsers (8 answers) Closed 3 years ago . How do you add box-shadow to a CSS table row? Adding box-shadow: 2px 2px 2px #888888 to the element table-row in the code below does nothing and only works on the table element or the table-cell element: .table { display: table; background-color: #ffffff; } .row { display: table-row; box-shadow: 2px 2px 2px #888888; } .cell { display: table-cell; width: 100px; }

CSS 阴影动画优化技巧

阅读更多关于 CSS 阴影动画优化技巧

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> box-shaodw 在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子： div { width: 100px; height: 100px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } 希望 hover 的时候，盒阴影从 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 过渡到 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3)。 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) --> box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) OK，最简单的方法当然是： div:hover { width: 100px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } 专门建立的学习Q-q-u-n ⑦③①-⑦⑦①-②①① 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）因为过渡动画是在两个不同的盒阴影状态在发生，所以在过渡动画的时间内，浏览器会不断的重绘盒阴影

小总结

阅读更多关于小总结

Since box-shadow cannot be used on display:table-row elements, how can I mimic a table and use box-shadow on the pseudo-row elements?

阅读更多关于 Since box-shadow cannot be used on display:table-row elements, how can I mimic a table and use box-shadow on the pseudo-row elements?

问题 It's already been confirmed that it's not possible to add a box-shadow to a display:table-row element in a way that's compatible with all the major browsers. For reasons that boggle my mind, a row cannot be styled as a group, which means you can't add a box-shadow to an entire row in a display:table and can only add it to the individual display:table-cell elements, which then creates vertical shadowing in-between cells which I don't want. So how can I mimic a table whereby the width of the

CSS “inverse border-radius” outside element's bounding box to create a mobile phone notch design [duplicate]

阅读更多关于 CSS “inverse border-radius” outside element's bounding box to create a mobile phone notch design [duplicate]

问题 This question already has answers here : border curved css - circle with curved end (2 answers) Closed 9 days ago . I'm trying to create something that looks like a mobile phone with HTML and CSS and I'd like the camera to have something like an "inverted border-radius" that connects it with the frame smoothly. I can't just make it bigger and mask the unwanted area with a pseudoelement with a white background because the screen content might not always be white. Also, I can't use mask-image

CSS “inverse border-radius” outside element's bounding box to create a mobile phone notch design [duplicate]

阅读更多关于 CSS “inverse border-radius” outside element's bounding box to create a mobile phone notch design [duplicate]

订阅 box-shadow