box-shadow | 易学教程

Strange Box-shadow bug on Chrome 51 while scrolling

阅读更多关于 Strange Box-shadow bug on Chrome 51 while scrolling

问题 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 回答1: I encountered this bug. I don't know what causes this but here's a simple

【转】遮罩层——通过阴影弱化背景的四种方案

阅读更多关于【转】遮罩层——通过阴影弱化背景的四种方案

方法一：代码-1： /* 用于遮挡背景 */ .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8); } /* 需要吸引用户注意的元素 */ .lightbox { position: absolute; z-index: 1; width: 40%; height: 140px; background-color: #FFF; margin-top: 10em; margin-left: 30%; } 缺点：需要增加一个额外的HTML元素。这意味着该效果无法由css单独实现。方法二：伪元素方案代码-2： body.dimmed::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0, 0.8); } 优点：相对灵活，可一满足绝大多数人对遮盖层的期望。缺点：可移植性还不够好，因为 <body> 元素上可能有其它需要占用 : :before 伪元素。需要一点JavaScript来给添加dimmed这个类。伪元素无法绑定独立的JavaScript事件处理函数。、方法三：box

border-radius with box-shadow inset pixelized / rugged

阅读更多关于 border-radius with box-shadow inset pixelized / rugged

If you can't see this problem then please try take a look at this codepen , here you should see what I mean. I've tried several ways to fix it. Below in comments you can see one of them. Still it seems to render 1px rugged border between proper border and dropped shadow . If it depends on browser renderer then is it a bug? How to fix it properly for all modern browsers. html{ background-color: #554343; } div{ display: block; width: 300px; height: 300px; margin: 0 auto; border-radius: 50%; border-width: 0; /* no result border-width: 2px; // uncommented no result border-style: solid;//

纯JS实现KeyboardNav(学习笔记)一

阅读更多关于纯JS实现KeyboardNav(学习笔记)一

纯JS实现KeyboardNav(学习笔记)一这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态数据结构的使用哈希,数组做出来导航页面实际上数组就是hash 数组带方括号其实是hash的一种简写. 且数组是对象. 报错学习 JS错误:没有被处理的语法错误 :不期待的字符串] 意思就是这里不应该有字符串] 语法错误 css重要代码 text-transform: uppercase; /*文本小写变大写*/ #mainxxxx{ display: inline-block; } main{ text-align: center; } /*mainxxx这个div居中*/ #mainxxxx>div:nth-child(2){ margin-left: 1em; } #mainxxxx>div:nth-child(2) 代表 mainxxxx 的名为 div 的第二个子元素. 定位 kbd 里面的 button ,并添加 hover kbd

前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

阅读更多关于前端每日实战：4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cdKMBTk 源代码下载请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects 代码解读在 dom 中定义一个容器： <div class="box">BUTTON</div> 容器居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: skyblue; } 设置按钮的 2d 样式，为了便于调整按钮尺寸，使用了变量： .box { background: linear-gradient(to right, gold, darkorange); color: white; --width: 250px; -

CSS box-shadow in jQuery .css()

阅读更多关于 CSS box-shadow in jQuery .css()

Firefox 18 does not seem to recognize the -moz-box-shadow or the box-shadow CSS attribute. If I use border-color , everything works fine. $($this).hover( function () { //$(this).css('border-color', '#ff0'); $(this).css('box-shadow', '10px', '10px', '5px', '#888'); //$(this).css('-moz-box-shadow', '10px', '10px', '5px', '#888'); }, function () { $(this).css('border-color', ''); //$(this).css('border-width', ''); } ); What am I doing wrong? You need to make the arguments into one string literal. The value parameter of the css(property name, value) function is one argument. $(this).css('box

web手机页面设计注意事项

阅读更多关于 web手机页面设计注意事项

手机页面与电脑端的区别首先在头文件中，首页页面一般会有一下几条语句：  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>马贝商城-登录</title>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="./css/fonts/iconfont.css"/> <link rel="stylesheet" href="./css/comment.css"/> <link rel="stylesheet" href="./css/login.css"/>  <!--[if lt IE 9]> <script src=" https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script&gt ; <script src=" https://cdn.jsdelivr.net/npm/respond.js

CSS 预处理器 Stylus分享

阅读更多关于 CSS 预处理器 Stylus分享

CSS 预处理器 Stylus分享 ps:为了分享，内容东拼西凑，并非原创，很多参考了张鑫旭大大翻译的中文文档。这里放上两个不错的stylus链接： https://github.com/leeseean/stylus-style-guide github stylus语法规范 http://blog.hooperui.com/561-2/ 预处理器的作用ect 写的很好。。一、简介由于原生css有一些缺陷，一些CSS预处理器应运而生使用最多的是变量（variables），代码混合（ mixins），嵌套（nested rules）以及代码模块化(Modules)。复用，逻辑能力和抽象能力。 Stylus 相较于SASS更加简洁，甚至冒号也都可以省略，初学Stylus时感到它太神奇了，仅仅以空格分隔属性名和多个属性值就可以生成想要的CSS，而且还可以拼接字符串等等。与此同时，类似Ruby或Python完善的缩进语法，Stylus在简约自由中有效的防止了语法歧义。安装 npm install stylus --save 例子 Stylus由Javascript编译，其结构语句也和Javascript相差不多。Stylus较之LESS则要优越不少，不仅仅是可定义变量，如Javascript般的条件语句和循环语句也为Stylus带来各种可能，加上丰富的内置函数

迷宫小游戏

阅读更多关于迷宫小游戏

迷宫小游戏 <html lang="zh-CN" class="translated-ltr"> <head> <meta charset="UTF-8"> <title>迷宫</title> <style type="text/css"> canvas { display: block; margin: 50px auto; box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767; } body { margin: 0; padding: 0; font-family: "Microsoft YaHei", "微软雅黑", "consolas"; background: #fbecc3; background-attachment: fixed; } a { text-decoration: none; color: #000; } .navbar { background-color: #000; width: 100%; height: 50px; } .container { width: 1000px; margin: 0 auto; } .navbar .navbar-content-1 a { float: left; color: #FFF; line-height: 50px; display: inline

使用gulp构建前端（二）

阅读更多关于使用gulp构建前端（二）

使用gulp构建前端（二）在使用gulp构建前端（一）文章中已经搭建了整个gulp的使用环境，现在我们来开始使用一些简单的插件的进行整个项目的编译过程。插件一使用gulp-imagemin压缩图片文件（包括PNG、JPEG、GIF和SVG图片）还是进入项目目录本地安装gulp-imagemin npm install gulp-imagemin --save-dev 查看package.json文件是否添加了依赖，熟练过后就不用查看了，排查错误的时候可以这样。 { "name": "chen", "version": "1.0.0", "description": "", "main": "build/index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "chen", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-imagemin": "^3.0.1" } } 开始在gulpfile.js文件中开始编写 var gulp = require('gulp'), //本地安装gulp所用到的地方 imagemin = require('gulp-imagemin');

订阅 box-shadow