一般情况下，我们给块状元素（四边形）添加阴影样式，直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了，但是总有一些需求是那么的特别，例如下图： 要求给这样的梯形盒外围加...

滚动条是浏览器中最常见的组件了。然而，滚动条的颜值总是不能令人满意，特别是嵌入在页面中的滚动条: 漂亮的网页突然出现一根灰灰的滚动条真是太煞风景了。虽然浏览器也提供...

在很多购物网站上都能看到优惠券，代金券，什么什么的券，但基本都是图片直接放上去，那么你有没有想过css来做一个呢，反正我是这样想过。那么你怎么做呢，切图做背景平铺边缘...

今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码， 于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词...

响应式布局的单位我们第一时间会想到通过rem单位来实现适配，但是它还需要内嵌一段脚本去动态计算跟元素大小。 比如： (function (doc, win) { let docEl = doc.documentElement let resizeEvt = 'orie...

本文介绍了css实现悬浮效果的阴影的方法示例，分享给大家，具体如下： 要实现的效果图： 实现的代码： -webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px...

本文介绍了CSS3实现全景图特效示例代码，分享给大家，具体如下： 基本代码 html代码： div class=panorama/div 首先定义一些基本的样式和动画： .panorama { width: 300px; height: 300px; background-ima...

需求说明 因为项目中章节配置的时候有小数点，1，1.1,1.2,1.11的标题，这个时候每一行标题的id,class设置成标题号是独一无二的标记。但是，直接用js获取是获取不到的，例如$('#3.22')打印...

三角形 div class=box/divstyle.box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid red;}/style 平行四边形图标 div class=...

案例基础布局 html ul class=box li class=item/li li class=item/li li class=item/li li class=item/li /ul css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px; height: 300px; background: red; border: 1px solid #ccc; font...

如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜...

用js的event可以用来阻止input,select,checkbox的默认事件，如 event.preventDefault()event.stopPropagation() 其实用纯CSS也能实现，如 【来源：自由互联：http://www.yidunidc.com/usa.html 欢迎留下您的宝贵建议...

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 border:1px solid red;outline-style:dotted;ou...

css样式改变及实际用法，先给大家展示效果图，感觉不错请参考实现代码。 效果图如下所示： html xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title引入...

本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下： 【文章出处:国内服务器】 效果： 代码： html： ul liaaaa/li libbbbbbb/li licccc/li lidddd/li lieeee/li/ul css：...

曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用障眼法做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让...

属性详解 transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的CSS属性，如b...

radio-and-checkbox 纯CSS实现radio和checkbox实现效果 reset-radio 在开发PC端的项目时，经常会用到radio和checkbox组件，可是因为原生的样式相对来说不符合设计师的设计风格，所以我们可能会经常...

css counter属性被几乎所有浏览器（包括IE8）支持， 但是却不常使用， 这篇文章就带大家学习了解下这些属性 COUNTER-RESET 明译为计数器重置。形如： counter-reset: counter-name 常见写法为 /*...

纯css3制作煽动翅膀的蝴蝶，先看效果 怎么样，效果还不错吧 上代码： html div id=butterfly div class=leftSide/div div class=body/div div class=rightSide/div/div css body{ background: url(./images/bg.jpg) no-repeat;...

这是一款纯CSS实现的大型下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分类较多的大型网站使用。 查看演示地址：css_menu 下载...

半透明边框 实现效果： 实现代码： div你能看到半透明的边框吗？/divdiv { /* 关键代码 */ border: 10px solid rgba(255,255,255,.5); background: white; background-clip: padding-box; /* 其它样式 */ max-width: 20em...

本文介绍了css实现背景半透明文字不透明的效果示例，分享给大家，具体如下： 效果如下： !DOCTYPE htmlhtml head meta charset=UTF-8 title/title style html{ background: #6a8db1; } .aside{ background-color:rgba...

精灵图： 在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。 为了减少资源的访问次数，将多个...

为啥要用这个，要从做海报说起，那是一个风雨交加的夜晚。。。 好了不扯淡了，我们言归正传，为啥用他，因为浏览器没有字体呗。 那为啥要你告诉呢？我自己不会去w3cschool去看去...

CSS3实现可翻转的hover效果,具体代码如下所示： 1.css /*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0 auto; text-align: center; background-color:...

本文章介绍了CSS3之transition实现下划线的示例代码，分享给大家，具体如下： 在这里先看看我们的demo 认识transition 这是CSS3中新增的一个样式，可以实现动画的过度。通常使用在添加某...

一、 目的 通过本文，让大家可以明白清除浮动的原理和几种方法，最后得出一种本文认为最好用的方法。 二、 内容简介 1、 引入，还原浮动本来的意义 2、 说明，实际开发中常用浮动...

使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。 ，如图为两个侧边箭头图片。 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleLunBo/title style *{ padding: 0; marg...

有时侯页面很长，需要指示箭头告诉用户下面还有东西。可以用纯CSS的方法实现。 HTML：添加一个链接，可修改锚点点击时滑动到指定位置，这里使用了Bootstrap 3.x版本的一个向下【来源...

1、引言 我们在写页面的时候，有的时候会遇到多栏布局，每个栏目里面的内容有的时候可能不一样，这样就会导致每个栏目实际的高度也是不一样的，如果每个栏目有背景颜色的，就...

本文介绍了CSS浮动的特性，分享给大家，顺便给自己留个笔记 浮动具有以下特性： 盖不住的文本 浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且...

一、display:box; 在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。 二、可在其子代设置如下属性 前提：使用如下属性，必须在父代设置display:box; 1.box-flex:num...

css中为什么要有层叠机制 因为在css中可能会有多个样式同时影响同一个元素的某个属性，层叠机制可以解决作者（写代码的人），用户（浏览页面的人）和用户代理（一般指浏览器）的...

CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align【文章来源：http://www.1234xp.com/mggfzq.html网...

多行文本溢出时出现省略号 本文推荐2种方法。 1. css tip：只兼容chrome内核的浏览器。ff不支持。 .box { overflow: hidden; /* 溢出时不显示溢出的内容 */ text-overflow: ellipsis; /* 发生溢出时使用省...

本文介绍了CSS 图片动画特效的示例代码（相框），分享给大家，具体如下： 下面是效果图 HTML代码 !-- 主容器 --div class=box !-- 图片 -- img src=images/pic.png alt=/ !-- 内容 -- div class=box-inner-co...

本文介绍了CSS 翘边阴影的实现代码，分享给大家。具体如下： 仔细观察可以看到每张图片下面的两个角都有不同程度的翘边。 实现原理和【CSS】曲线阴影差不多，也是通过伪元素来实...

从一个常见问题开始讨论：如何用css将一个元素的高度设置为【浏览器内容窗口高度】。 方案一：使元素高度占满屏幕 在css中，vh是一个特殊的长度单位，100vh的值就是【浏览器内容窗...

效果： !doctype html html head meta charset=utf-8 title无标题文档/title style /*样式1*/ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border:...

本文介绍了css3 column实现卡片瀑布流布局的示例代码，分享给大家，具体如下： 实现效果 今天遇到了需要实现一个卡片的瀑布流布局的问题，卡片高度是不同的。 最后使用css3中的col...

最近遇到一个需求，要在图片上显示带有半透明背景的文字，效果如下图所示： 需求.png 看到这个需求之后，第一反应是使用CSS3中的opacity设置元素的透明度。 !DOCTYPE htmlhtml lang=enhead...

浏览器的兼容性越来越好，移动端基本是清一色的webkit，经常会用到css的不同尺寸/长度单位，这里做个整理。 概览 绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Mil...

CSS中有些属性的前面会加上*或_所代表的意思 给不同的浏览器识别 例如： color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/ *ba...

CSS 设置滚动条样式的实现代码如下所示： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚...

纳尼？什么星星外衣？好，直接上图比较能说清楚： 仔细看会发现规律：可以根据百分比/分值动态改变高亮星星的个数。 分步骤图： 这种效果，如果遇到一分一个星，没有半星（或者...

最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有...

前言 本文主要跟大家分享了一个利用CSS3实现文字折纸效果的实例，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧 效果图： 示例代码： 代码如下，复制即可使...

一个div同时设置background-color和background-image的话，color是处于img层下方的，无法实现遮罩效果，所以需要再创建一个div作为其子div,然后设置子div的背景颜色，介绍两种方法： 第一种，代...

具体代码如下所示： style#toastLoaderFullScreen { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; background-color: rgba(224, 38, 38, 0.5);}#toastLoader { position: absolute; left: 50%; top: 4...