边框圆角边框盒阴影边界图片 圆角CSS3 圆角制作器 指定每个角 背景 多重背景图像大小图像的定位背景剪裁 渐变线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中心定义指定角度的线性渐变多个颜色节点的线性渐变线性渐变------透明度重复的线性渐变重复渐变渐变的大小closest-sidefarthest-sideclosest-cornerfarthest-corner 文本效果文本阴影 盒子阴影 阴影颜色...
## CSS2 背景##### background-color 设置背景颜色##### background-image 设置背景图片- ````background-image:url("图片的路径");````##### background-repeat 设置背景图片的重复方式 - repeat 默认值. 使背景图片在水平和垂直两个方向重复.以铺满元素 - repeat-x 水平方向重复 - repeat-y 垂直方向重复 - no-repeat 图片不重复##### background-position 设置背景图片显示位置- 默认背景图片是从左上角开始显示. - 设置方式...
译文原链接:http://codetheory.in/html5-fullscreen-background-video/前言:当网页载入时,自动播放的全屏背景视频 已经成为当前颇受欢迎的趋势。 就个人而言,我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住,视频的故事必须与品牌相关。 近年来,我们被FB和Twitter等社交网络上的大量视频所包围。 据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能,因此我决定构建一个用到 HTML5 视...
随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML。#------------------------------------------------我是可耻的分割线-------------------------------------------<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="height:35px;width:400px;position:relative;"><input type="text" style="height:35px;width:370px;padding-right:30px;"/><span style="...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3感应鼠标的背景闪烁和图片缩放动态效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
/*标题背景*/
h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300p...
一、有点俗态的开场白要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但 是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不 支持Opera浏览器。本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束颜色蓝色,结束的蓝色的透明...
今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果。绿色的小原点由远到近,由近到远一种飞跃效果。效果非常好看,我们一起看下效果图: 在线预览 源码下载 我们一起看下实现的代码。这是一款由jquey和css3实现的效果。这里引用的是jquery 11.0版本。注意需在ie9以上浏览器、google、或火狐等支持css3的浏览器中运行。html代码:<div class="container" style="opacity: 0.55; -webkit-perspective: 50px;"><div st...
之前做项目的时候,用opacity属性,但是这个属性用后,不但背景会半透明,背景上的文字也会变成半透明。显然用opacity属性实现这个效果是不可取的。在css3中我们可以用 background-color:rgba(); 来实现,rgb是背景要显示的颜色,a则是背景的透明度,从而实现我们想要的效果。本人亲自做过实验,希望可以帮到大家,谢谢。。 原文:http://www.cnblogs.com/bjwhite/p/6385904.html
一直以来都认为css背景图与直接插入img图片的效果是差不多的,直到最近拜读了一位大神的作品,发现大部分图片都是通过背景图形式显示的,于是在此总结了下二者的区别:1. css中的图片以背景图形式存在,写在html中的图片以标签形式存在。而在网页加载过程中,以css背景存在的图片会等到html结构加载完成才开始加载,而html中的img标签是网页结构(内容)的一部分会在加载结构的过程中加载。附:在一个单纯由Html和Css组成的页面中,...
CSS3入门之边框与背景*:first-child {margin-top: 0 !important;
}body>*:last-child {margin-bottom: 0 !important;
}/* BLOCKS
=============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0;
}/* HEADERS
=============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px;padding: 0...
知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。css代码: <style>*{margin:0;padding:0;}body#wrap{width:100%;height:500px;
}</style>JavaScript代码: <script>function convert(sRgb){ /*rgb转换成HEX*/var sRgb=sRgb;var sHex=sRgb.toString(16);sHex=sHex.length<2?‘0‘+sHex:sHex /* 三目判断 判断条件 ? 符合条件 :不符合条件*/return...
本文我们分享前端CSS背景100%平铺,浏览器缩小背景显示不全bug解决的两个方法,如果你也遇到了,那么就可以参考下面文章。把浏览器的窗口缩小时,拖动滚动条时你会发现原本设定的CSS背景100%平铺的背景少了一块,而且窗口越小时,空白越大。解决方法:width:100%;min-width:990px;在width:100%; 后面加个 min-width:**px; 这个长度取于你的网页最低宽度。Ps:逐风个人认为上诉的解决方案还不够人性化,想要实现不同分辨率下灵活覆盖...
### 六 背景1 背景颜色:background-color2 背景图片:background-image:url(图片路径)---双引号可加可不加3 背景图片平铺:background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y4 背景图片定位:background-position:①px(v1-一起设置x,y轴;v1 v2 分别设置x轴y轴);②% 以高度为标准,也分x轴y轴;③关键字:x轴(left/center/right)y轴(top/center/bottom)5 背景图片的尺寸:background-size:①v1 同时设置x,y轴,v...
这一次简单介绍下CSS的背景设置和文本样式设置(这一次写的风格可能和之前有所不同,主要是之前一篇随笔包括的内容有点多,杂,所以这次单独介绍某一个知识点,简约点,所以你会发现没有Part几) 下文部分图片截至https://www.bilibili.com/video/BV1Mx411m7fd?p=48(黑字正文,绿字说明)CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的结果一些与背景相关的属性及其描述属性描述backgroung-attachment背景图像是否固...
4. 背景布局(1)background基本语法background : background-color || background-image || background-repeat || background-attachment || background-position 语法取值该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。使用说明设置对象的背景样式。如使用该复合属性定义其单个参数,则其他参数的默认值将无条件覆盖各自对应的单个属性设置。例如:设置 background : white 等...