text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。 text-shadow: 10px 10px 20px...

1.使用伪类，让Border边框显示一半 !DOCTYPE htmlhtml head meta charset=utf-8 title使用伪类，在元素前或后插入内容/title style div { position: relative; width: 300px; height: 50px; background-color: #bbb; padding: 4px...

实现效果 实现代码 html div id=container nav ul lia href=#Home/a/li lia href=#WordPress/a !-- First Tier Drop Down -- ul lia href=#Themes/a/li lia href=#Plugins/a/li lia href=#Tutorials/a/li /ul /li lia href=#Web Design/a !-- First T...

实现效果 代码 html div class=css-slideshowfigureimg src=http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg alt=class-header-css3 width=495 height=370 class=alignnone size-full wp-image-172 /figcaptionstrongCSS3:/st...

今天来讲一个淘宝京东等商城里面经常用到的小图hover查看大图和信息的css特效，先来看图片展示： 如果可以的话，还可以设置阴影和延迟特效啥的，想看的话可以看之前的几个css特效...

实现效果 实现代码 h1海外IDC网/h1h3JB51.net/h3div class='loader loader1' div div div div div div/div /div /div /div /div /div/divdiv class='loader loader2' div div div div div div /div /div /div /div /div /div/divdiv class='loader...

在做登陆页面等的首页的时候，经常会遇到需要放一张背景大图的情况，并且需要图片按比例缩放，来适应不同屏幕的大小。 html代码如下： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta...

实现效果 实现代码 html div class=container div class=red flame/div div class=orange flame/div div class=yellow flame/div div class=white flame/div div class=blue circle/div div class=black circle/div/div CSS3 body{ background:black;...

核心代码 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titletable2n/title/headbody style table { margin: 30px auto; bord...

实现效果 实现代码 html headerh1Thumbnail Hover Effect with emCSS3/em/h1/headerdiv class=wrapperdiv class=galleryulliimg src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png/liliimg src=https://s3-us-west-2.amazonaws.com/s.cd...

实现思路 首先创建一个父容器，用两个无序列表通过弹性布局将父容器分为两栏。 在li里面存放图片通过给左边的li {background: url('图片地址') no-repeat; background-size: 200% 100%;}给右边的li...

实现效果 先用html搭建个基本框架 bodydiv class=containersection id=contentform action=h1Login Form/h1divinput type=text placeholder=Username required= id=username //divdivinput type=password placeholder=Password required= id=pas...

两列布局项目中经常会用到，很多种方法可以做这样的效果 但是最方便的还是要属flex了，给外层父元素设置display:flex;然后子元素，宽度自适应的那个设置 flex-grow:1;，另外一个设置固定...

前言 在前端编程中我们经常用到nth-child选择符，它可以接受数值也可以接受odd,even等，今天翻阅精通CSS一书才想起它还可以接受一个表达式，类似4n+1,-2n+1等。那他们各自具体有什么用呢...

前言 最近，接了一个客户的原生页面。客户要求该页面必须兼容IE9及其以上版本的浏览器，同时要求360浏览器的兼容模式可以正常访问。360浏览器是可以通过代码强制极速模式的，这个...

先看效果： 鼠标移在图片上时，添加 阴影效果+文字 / 图标 实现的关键是 CSS 的 opacity 和 hover ，本文也主要介绍遮罩层的实现 HTML: div class=img_div img src=item.image_base64 @click=deleteImg class=...

在学习css3的过程中，发现很多看着炫酷的效果，利用css3的属性能很简单的实现，animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这个属性做出以下鼠标停在按钮上有...

上次，我们形成了两种header的布局，一种flexbox，一种float，最后与身边做重构的同事交流下来，选择了float的布局。 事实上布局的选型不需要我关注，我的参与或者一些意见多数是自我...

margin:auto; + position: absolute; 上下左右:0 一看 demo 就懂的啦 !DOCTYPE htmlhtmlhead【文章出处:防御服务器 】meta http-equiv=Content-Type content=text/html; charset=UTF-8meta charset=utf-8meta name=viewport content=ini...

有一种简单的css方法实现点击之后的弹出框上下左右居中且附加灰色透明遮罩锁定窗口清除滚动条 html代码【原URL http://www.yidunidc.com/usa.html复制请保留原URL】 div class=boxdiv class=boxs !-- 白...

有个需求是要实现红包的抖动效果，之前没做过，记录一下嘻嘻~~ 这里用到了transform: rotate()属性，加上animation实现动画效果，不多说上代码 .red_packet { width: 180rpx; height: 220rpx; position:...

网易看游戏官网（http://kanyouxi.163.com/）（已下架），是我以前（2014年）做的一个项目，也是我们首个放弃Flash，采用HTML5与制作动画的网站，当时业内为数不多的采用CSS3用于主动画实际...

先介绍一下一个有趣的属性 conic-gradient 圆锥渐变 ！ 对其感兴趣是因为我发现它竟然可以用来做 圆饼图 ！ 比如这样的： 这样的： 其原理也很简单：就是以起始点为中心，然后以顺时...

开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这...

0.前言 2016年08月18日 今天看到注意到苹果手机的滑动解锁，提示字上会有一道白光闪过，感觉很炫酷，所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时，白光一闪而过，...

问题 css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。 body div class=container /div /body style .container{ width: 100px; height: 100px; background: #【文章原...

具体代码如下所示: /*滚动条的宽度*/ ::-webkit-scrollbar { width:9px; height:9px; 【来源：美国站群服务器 请说明出处】}/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改...

纯CSS实现的DIV悬浮效果(固定位置)，兼容常用的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下： 实现代码： !DOCTYPE htmlhtmlheadmeta charset=utf-8 /meta http...

【文章转自：http://www.1234xp.com/xjp.html 复制请保留原URL】 flex 从 2009 年推出到现在，已经得到了几乎所有浏览器的支持。作为一种简便的、响应式的布局方案，flex 给我们的布局开发带来...

【前言】 无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上，vue中用 scoped 属性实现样式的私有化，利用深度作用选择器 /deep 来实现样式的去私有化。 例子： div...

background-position如何影响背景图的展示 这两天在项目中替换首页图片的时候，发现了一个问题，之前的样式设置的是background-position:center,当页面缩小或者放大时背景图【文章来自：http...

哪些想啥提啥的产品们 最近做了一个需求，准确说是迭代需求：加了一个头部概览（类似下图），以更好的让用户观察到营销变化，故事的开头就这样悄悄的埋下了伏笔。 以前这个页...

目录 1. 代码解析 2. 源码 源码 1. 代码解析 1.1 html 代码解析 div class=checkbox div class=inner id=inner div class=toggle id=toggle/div /div/div 最外层 checkbox, 是按钮的整体, inner 是ON下绿色框所占的区域...

今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 !DOCTYPE htmlhtml lang=en head meta charset=UTF-8 meta name=viewport content=width=devi...

在前端的设计稿上经常会看到X这种形状的关闭按钮和以及其他三个方向的空心箭头图标。css有多种方式来实现，尝试了一下发现不是很容易记住，今天就来写写一个简单的利用after伪元...

今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思： 觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。...

目录 瀑布流典型网站 瀑布流布局原理 大体思路 具体思路 插件封装 第一步 第二步 第三步 第四步 第五步 动态渲染 需求分析 渲染第一页数据 渲染页面 第二页面的渲染（手动加载）...

使用缺省 src 的img元素实现滚屏加载效果，但是，就有可能存在这样一个体验问题：如果我们的 JavaScript 加载比较慢，我们的页面就很有可能出现一块一块白色的图片区域，纯白色的，...

目录 基本选择器扩展 属性选择器 伪类与伪元素选择器 基本选择器扩展 1.子元素选择器 :tomato: #wrap .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配...

本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下： 方法一 父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题 html div class=div-contain...

谈到 fieldset 与 legend ，大部分人肯定会比较陌生，在 HTML 标签中，属于比较少用的那一批。 我最早知道这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置统一代码默认...

运行效果 代码实现 html div id=watch div class=frame-face/div ul class=minute-marks li/lili/lili/lili/lili/lili/li li/lili/lili/lili/lili/lili/li li/lili/lili/lili/lili/lili/li li/lili/lili/lili/lili/lili/li li/lili/lili/lili/lili/li...

问题描述 今天在修改页面样式的时候，遇到子元素设置 margin-top 但是并没有使得子元素与父元素之间产生间隔，而是作用在了其父元素上，导致父元素产生了一个 margin-top 的效果。 今...

效果查看地址：游计划（uplanok.com） 代码： img{width: 100%;border-radius: 3px;transition: all 2s;}img:hover{transform: scale(1.2);} img外层标签元素，需要设定overflow: hidden，否则图片放大后会溢出覆盖其他...

flex-grow、flex-shrink、flex-basis三个属性的作用： 在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。 (注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元...

1.Animate.css简介 Animate.css 是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，首页，滑块和引导注意的提示。它是一个来自国外的 CSS3 动画库，它预设了抖动（shak...

前言 display、visibility、opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题。 属性 值 是否在页面上显示 注册点击事件是否有效 是否存在于可访问性树中 display none 否 否...

要求 body下div垂直居中 div内文字垂直居中 div宽度和高度均为body宽度的一半 分析 div居中不难，考虑 margin 或者 left/top 配合 translate 属性实现 关键点在于div高度等于body一半，由于body没有...

运用场景： 新需求有个项目是要做问卷调查，其中必然会涉及到很多题目，以及一个题目下需要对多个人打分，手机端滑动的时候，就会发生这种现象，划上去会忘记了题目。 所以计...

微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特...