移动端开发的一个很大的好处就是可以不管讨厌的IE浏览器的兼容性，只需要页面在火狐等一些高级浏览器中正常显示就行。最近在写一些移动端的页面，刚好在今天遇到了这么一个神奇的css特性。那就是tap-highlight-color这个特效是实现在移动端点击某个地方的时候，比如说按钮或者超链接的时候，系统会默认加上一些灰色的背景和一些高亮的效果。但是有的时候我们并不想要这些效果。并且希望点击的时候实现神不知鬼不觉的感觉，，这个时...
background-size可以设置背景图片的大小，数值包括 长度length和百分比percentage。 并且会根据背景原点位置background-origin设置其图片覆盖的范围。那么下面我们一起来了解这个background-size属性吧。 background-size语法 w3c对background-size的语法规定如下： 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ | | auto ]{1,2} | co...
为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。rgba()后面的百分比表示位置。 具体代码：background: -webkit-linear-gradient(top, rgba(255,255,255,0.4)0%, rgba(255,255,255,0.2)75%, rgba(255,255,255,0)98%);/* Safari、Chrome */background: -o-linear-gradient(bottom, rgba(255,255,255,0.4)0%, rgba...
网站中的背景颜色如果比较单一会显得不够美观，那么，如何让背景颜色多变呢？本篇文章就来给大家介绍使用CSS3动画让我们背景颜色逐渐改变颜色，调整颜色和顺序的组合，使颜色的设计更加醒目。话不多说，让我们来看具体内容（推荐课程：css3视频教程）首先我们来看一下CSS3关键帧动画的基础知识让我们先了解逐渐改变元素的动画！在CSS 3 animation属性中，您可以设置关键帧并绘制详细的运动。关于动画的时间和时机、无限的循环，只有...
本篇文章给大家带来的内容是关于css3中背景属性中与边框相关的属性介绍 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1 与背景相关的新增属性background-clip：指定背景的显示范围。background-origin：指定绘制背景图像时的起点。background-size：指定背景中图像的尺寸。background-break：指定内联元素的背景图像进行平铺时的循环方式。注意：Firefox浏览器：支持除了background-size属性之外的其他三个属...
这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感兴趣的朋友们下面来一起看看吧。效果图如下：实例代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>css3给按钮添加...
这次给大家带来CSS3做出条纹大背景，使用CSS3做出条纹大背景的注意事项有哪些，下面就是实战案例，一起来看一下。1. 实现不等宽背景条纹：.cont{ width: 500px; height: 200px; background: linear-gradient(#78C9DB 70%,#0acf00 0%); background-size: 100% 20px; }如果想设置等宽的渐变只需要将开始值和结束值改为互补如果你需要等宽切无过渡的渐变，开始和结束值设置为50%即可。如果你想要垂直条纹，你只需要调整background-si...
本文主要介绍了css3编写浏览器背景渐变背景色的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。效果如下：知识点：rgb全色循环算法，HEX与RGB颜色转换算法、CSS3颜色渐变，CSS3渐变色兼容ie方法，定时器与循环，函数封装,数组应用等。源码：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Auth...
本文主要为大家详细介绍了CSS3如何打造磨砂玻璃背景效果,是css3中一个很有趣的技巧，希望能帮助到大家。简介这个效果是在看CSS Secrets这书上看到的,感觉很不错;实现原理也挺简单的;效果图及实现效果图代码实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*** 设置背景图全屏覆盖及固定* 设置内部元素偏移*/body { /*此处背景图自行替换*/background: url(d...
我们知道CSS3是可以做出很多酷炫的动画的，那么如果CSS3和JS结合起来使用那该有多么强大呢？今天教大家怎样用CSS和JS制作出上升的方块的动态背景，一起来看一下。HTML:<!DOCTYPE html> <html><head> <meta charset="UTF-8"><title>Glunefish</title><link rel="stylesheet" href="css/style.css"></head><body> <div id="F-dynamicbg-box"> <div> </div> <div></div> <div></div><div></div> <div></div> <div></div> <div></div> ...
边框和边框相关的属性如下。border-width用于设置边框的宽度，可选择包括：1）<长度值>：将边框宽度设为以CSS度量单位（如em、px、cm）表达的长度值；2）<百分数>：将边框宽度值设为边框绘制区域的宽度的百分数；3）thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度一次增大，边框宽度的默认值是medium。border-style用于设置绘制边框使用的样式，可以是下列值的任意一个。1）no...
1. 回顾一下之前学习过的background属性1.1 background-color1.2 background-image1.3 background-repeat1.4 background-position1.5 background-attchment1.6 background2. CSS3新增的background属性2.1 background-origin2.2 多重背景2.3 background-size1.1 背景颜色属性：background-color颜色的表示方法有3种：单词、rgb表示法、十六进制表示法1. 单词： 能够用单词来表述的，都是简单颜色2. rgb表示法rgb表示三原色“红”red...
CSS3之前我们可以对背景添加一张图片 CSS3允许我们在一个元素上添加多个图片多重背景图片<p class="demo"></p>.demo { width: 600px; height: 200px; border: 1px solid black; background: url(1.png) no-repeat;}多重背景可以把多个图片资源添加到background属性上，用逗号隔开 然后用background-position把他们定位到你想要的位置.demo { width: 600px; height: 200px; border: 1px solid black; backg...
CSS2.1 发布至今已有7年的历史。CSS3的出现就是增强CSS2.1的功能，减少图片的使用次数以及解决HTML页面上的特殊效果 当前，CSS3技术最适合在移动Web开发中使用的特性包括： ●增强的选择器 ●阴影 ●强大的背景设置 ●圆角边框阴影： 现在的CSS3样式已经支持阴影样式效果。目前可使用的阴影的效果分为两种：文本内容的阴影效果和元素的阴影效果。box-shadow CSS3的box-shadow属性是让元素具有阴影的效果，其语法...
很多人只要一提到@font face规则，心中就会不由自主“哦~~”的一声：“这个我知道，可以用来生成自定义字符小图标！”话是没错，问题在于很多人就以为生成字符小图标就是@font face规则的全部，实际上只是功能之一，如果真正了解@font face规则，你会发现，@font face规则可以做的事情其实非常多，尤其我们不考虑IE7，IE8浏览器的情况下。一、 @font face的本质是变量虽然说CSS3新世界才出现真正意义上的变量var，但实际上，CSS世界...