/** ie8支持透明度 **/
rgba(0,0,0,0.4); // 不支持ie8
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);
这个颜色“#19000000”是由两部分组成的。
第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:
0.1 - 19 ; 0.2 - 33 ; 0.3 - 4C ; 0.4 - 66 ; 0.5 - 7F ; 0.6 - 99 ; 0.7 - B2 ; 0.8 - C8 ; 0.9 - E5 ;
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff;都是白色。
到这里,rgba的用法就可以兼容IE8了。
1、禁止选择文本
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
2、在可打印的网页中显示URLs
@media print {
a:after {
content: " [" attr(href) "] ";
}
}
3、深灰色的点击渐变按钮
.graybtn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
background-color:#d1d1d1;
}
.graybtn:active {
position:relative;
top:1px;
}
4、网页顶部盒阴影
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
5、在可点击的项目上强制手型
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
6、CSS3 鲜艳的输入(边框渐变)
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #ddd;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
7、三角形列表项目符号
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
8、内部CSS3 盒阴影
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
}
9、外部CSS3 盒阴影
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
10、@font-face模板
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Arial, sans-serif;
}
11、CSS3渐变模板
#colorbox {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
12、CSS3:全屏背景
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
13、锚链接伪类
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
14、图片边框偏光
img.polaroid {
background:#000; /*Change this to a background image or remove*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired div*/
width:200px; /*Set to width of your image or desired div*/
}
15、通用媒体查询
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
16、跨浏览器透明
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
17、用CSS动画实现省略号动画
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
18、制造模糊文本
.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
19、包裹长文本 文本过长自动换行不会穿破盒子
pre {
white-space: pre-line;
word-wrap: break-word;
}
20、背景渐变色
button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
21、内容可编辑(contenteditable="true")
<ul contenteditable="true">
<li>悼念遇难香港同胞 </li>
<li>深圳特区30周年</li>
<li>伊春空难</li>
</ul>
22、输入框改变placeholder字体颜色
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder{
color: red;
}
:-ms-input-placeholder {
color: red;
}
- 浏览: 973016 次
- 性别:
文章分类
- 全部博客 (732)
- 笔记随笔 (129)
- JSON (1)
- jQuery (52)
- HTML (79)
- CSS (151)
- Django (2)
- python (2)
- ubuntu (10)
- AngularJS (2)
- 前端积累 (172)
- node (5)
- BootStrap (4)
- 数据库 (6)
- 笔记随笔,git (2)
- git (8)
- JS (69)
- cnavas (0)
- canvas (28)
- 生活与文章 (28)
- 移动开发 (8)
- 常见特效 (130)
- CSS,浏览器兼容 (20)
- windows (1)
- jsonp (1)
- XML (2)
- SVG (1)
- 源码解析 (2)
- 前端插件 (27)
- PHP (104)
- 后端积累 (72)
- PS (5)
- 学生提问 (61)
- 代码编辑器 (7)
- 教学笔录 (88)
最新评论
-
ouyida3:
大年初一写技术博客,牛
多种方案实现 CSS 斜线 -
青春..荒唐:
标准①lang 属性规定元素内容的语言,lang=" ...
前端面试问题总结 -
青春..荒唐:
新增1:①垂直居中一个img:img{ display: ...
前端面试问题总结 -
青春..荒唐:
新增:①事件委托:利用事件冒泡,自己所触发的事件,让父元素代替 ...
前端面试问题总结 -
田进丰:
居然还有java代码?
基于jQuery图片轮播
发表评论
-
link和@import的区别
2019-07-27 10:07 561【前言】 本文 ... -
弹性盒模型(2)------Flex容器元素
2019-01-24 17:25 1108【前言】 本文简单总结下弹性盒模型的元素组成 ... -
弹性盒模型(1)------Flex布局对子元素影响
2019-01-24 16:40 1913【前言】 总结讲解下弹性盒模型布局相关知识点, ... -
CSS优化单选多选按钮样式(2)
2019-01-16 11:35 1619【前言】 本文 ... -
浅谈纯CSS实现二级导航(优缺点与局限性)
2019-01-15 09:26 2066【前言】 本文 ... -
纯CSS实现半圆、1/4圆
2019-01-12 15:49 3230【前言】 本文简单介绍下实现半圆、1/4圆的几 ... -
CSS优化单选多选按钮样式(1)
2019-01-11 15:30 2060【前言】 本文简单介绍一种优化自定义单选和多选框 ... -
浅谈css3长度单位rem,以及移动端布局技巧
2018-12-10 15:40 736rem是什么? rem是 ... -
为什么绝对定位(absolute)的父级元素必须是相对定位
2018-10-24 22:33 2518【前言】 经常看到一句话,css使absolute ... -
伪类和伪元素的区别
2018-10-10 16:39 1116【前言】 本文简 ... -
CSS3实现模糊背景的原理
2018-07-25 16:58 1379【前言】 今天有个之前的学生问了道问题,怎么利用 ... -
利用CSS steps 实现逐帧动画
2018-05-01 21:05 1968【前言】 本文总 ... -
css奇偶后代选择器
2018-04-13 07:18 1320【前言】 遇到分类栏左右两侧不同样式需求,之前 ... -
input样式修改
2018-04-02 23:43 0(1)修改input默认背景 (2)placeholder ... -
修改placeholder字体的css样式
2018-04-03 07:04 1013【前言】 本文总结下修改placeholder字 ... -
css-样式初始化
2018-03-29 07:56 858在网站编写的时候,由于许多的标签会有默认存在的样式,比如P ... -
鼠标触发,从左到右渐变
2018-03-27 08:40 1708鼠标触发之后,从左到右渐变颜色 <!DOC ... -
margin外边距合并的问题
2018-03-24 16:00 922在我初学css的时候,关于css盒模型的外边距合并问题,迷惑 ... -
主流浏览器内核及浏览器CSS兼容前缀
2018-03-17 12:29 1399【前言】 今天聊天有个之前的学生问了道面试 ... -
width:100%缩小窗口时,右侧出现空白bug
2018-03-11 10:59 2628【前言】 刚才写了一篇解决学生问题的博客,写完后感 ...
相关推荐
以下是对标题“常用CSS跟JS效果整理”中涉及的知识点的详细说明。 **1. 常用CSS效果** 1. **布局**:CSS提供了流式布局、网格布局(CSS Grid)、Flexbox布局等,帮助开发者创建响应式的网页结构。 2. **定位**:...
本资料集“css例子培训资料及常用css定义”主要涵盖了CSS的基础概念、常用属性和实例,旨在帮助学习者快速掌握这一关键技术。 一、CSS基础 1. 选择器:CSS选择器是用于选取HTML元素的方式,例如`#id`、`.class`、`...
下面将详细阐述在给定的标题和描述中提到的一些常用CSS属性。 1. **字体属性**: - `font-size`:设置字体大小,可以使用像素(PX)、百分比(%)等单位。 - `font-style`:定义字体样式,如`italic`为斜体,`...
Css+div_常用CSS标签及属性 Css+div是Web开发中最常用的技术之一,Css是用于描述网页样式和布局的标记语言,而div是Html中最基本的布局标签。本文将从Css+div的角度,总结常用的Css标签及属性,并进行分类。 Css中...
常用css知识 html css css知识
标题“常用CSS工具类”和描述“快速做页面,少写重复代码,减少起类命的痛苦”都指向了这一主题。 在JavaScript开发中,尤其是在前端框架如React、Vue或Angular中,CSS工具类的使用更为常见。它们可以与组件紧密...
在探讨“WEB开发常用CSS样式”这一主题时,我们深入剖析了给定文件中的几个关键CSS样式示例,包括按钮样式、下拉选择框样式、以及页面滚动条样式。这些样式不仅展示了CSS的强大功能,也提供了实用的设计模式,对Web...
Css+div 常用CSS标签及属性 2009年10月15日 评论(0)|浏览(64) 点击查看原文 CSS中的长度 绝对单位:几乎不用在网页中 in 英寸 1in = 2.54cm cm 厘米 1cm = 0.394in pt 磅 1in = 72pt pc pica 1in = 6pc 相对...
` 是CSS中常用的技巧之一,用于使元素在其父容器内水平居中。 - 这种方法适用于固定宽度的元素。 - 如果元素宽度不是固定的,则需考虑使用其他方法,例如Flexbox或Grid布局。 #### 2. Sticky Footer 布局 **功能:...
### 常用CSS命名规范 #### CSS命名规范的重要性 CSS命名规范对于前端开发来说至关重要。良好的命名习惯不仅能提升代码的可读性与维护性,还能帮助团队成员更好地理解和协作。本文将详细介绍一种符合W3C标准的CSS...
### 网页制作之常用CSS缩写语法总结 在网页设计与开发的过程中,CSS(层叠样式表)是不可或缺的一部分。它不仅能够为网页添加丰富的样式,还能够提高页面的加载速度,优化用户体验。为了更好地掌握CSS,提高工作...
### 常用CSS缩写语法总结 在前端开发领域,CSS(层叠样式表)是必不可少的一部分,它用于描述HTML文档的外观和格式。为了提高代码的可读性和效率,掌握CSS的缩写语法至关重要。本文将详细介绍并总结常用的CSS缩写...
在这个名为“Css_div_常用CSS标签及属性等”的文档集合中,我们可以期待找到关于这两个主题的深入学习材料。 首先,让我们详细了解一下`DIV`。`<div>`元素是HTML中的一个块级元素,意味着它会自动占据一整行,可以...
网站常用css解决web项目div+css,使web页面随心所欲。方便大家下载
本资源“网页常用css3按钮样式代码”包含了一系列实用的CSS3代码片段,帮助设计师和前端开发者快速构建吸引人的网页按钮。 CSS3的引入极大地扩展了按钮样式的可能性,它支持多种新特性,如渐变、阴影、边框半径、...
}`:针对标题、段落、列表等常用元素进行重置。 4. `table{border-collapse:collapse;border-spacing:0;}`:让表格的边框合并,去除默认的边框间距。 5. `img{vertical-align:middle;border:0;}`:使图片居中对齐,...
HTML5 常用CSS3网页图标查看器,说明:1、图标上面的编号是在调用时对应的编号,只要在CSS里面写上content:"\f001" 这里的那串就会显示出来!如果不明白可以查看本页面的源代码! 2、使用之前要先加载字体。
语言程序设计资料:Css_div_常用CSS标签及属性.doc
下面我们将详细探讨一些开发人员常用的CSS API知识点。 1. **CSS选择器**: - **基本选择器**:如标签选择器(例如`div`)、类选择器(`.class`)、ID选择器(`#id`)和通配符选择器(`*`)。 - **高级选择器**:...