css3小总结
一.边框
1.border-radius:x,y,模糊半径,color(x为负数时左移动,y为负数是上移动)
2.box-radius:x,y,模糊半径,阴影半径,color
3.border-image:url() 切割图片的大小 repeat/round(平铺)/stretch(拉伸)。(*)
二.文字与字体
1.text-shadow:x,y,模糊半径,color;
2.@font-face{
font-family:"mooc "
url(字体服器上的链接地址);
}
p{font-family:"mooc "}
3.text-overform:over;但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,
三.颜色
1.background:rgba(111,33,22,0.5)R,G,B 0-255之间的值,0-1之间的透明度。
2.background:linear-gradient(top left,yellow,red,blue)90deg=to left,270deg=to right/180=to bottom/0=to top /to top left右上角到左上/to top right左上角到右上角。
四.与背景相关的样式
1.background-fize:20px 30px 背景缩放cover图片覆盖整个容器content沿边覆盖。
2.background-origin:padding-box/border/box/content-box背景开始位置
3.background-clip:padding-box/border/box/content-box背景图片裁剪的位置
4.multip-background:背景多重样式。
a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。
css3小总结的更多相关文章
- css3 小图标提示特效
最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...
- CSS3小黄人
CSS3实现小黄人 效果图: 代码如下,复制即可使用: <!DOCTYPE HTML> <HTML> <head> <title>CSS3实现小黄人&l ...
- CSS3 小黄人案例
使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap"> <!-- 头发 --> <div class=&q ...
- CSS3小清新下拉菜单 简易大方
之前有分享过几款CSS3菜单和jQuery菜单,像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...
- css3小动画:鼠标hover后text-decoration的动画
实现效果 具体实现 利用css3 ::after或者::before伪元素实现.html代码 <a class="abstract-title" href="/ar ...
- CSS3小笔记
border-radius:圆角属性:border-radius:左上,右上,右下,左下.transform:rotate(角度):transparent 透明的三角形的写法设置宽和高为0,设置边框的 ...
- css3 小三角的用法
<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-dow ...
- Css3小技术
圆角border-radius border-radius:length *注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法 ...
- CSS3小图标菜单导航
在线演示 本地下载
随机推荐
- XidianOJ 1057 卡尔的技能
题目描述 dota中的英雄卡尔的技能说明如下,他拥有3种不同的元素(冰,雷,火),每次他需要释放技能的时候,他要先选择3次元素来决定释放技能的类型(比如,他可以选择火+火+火或冰+雷+火等等),生成技 ...
- splinter(python操作浏览器魔魁啊)
from splinter import Browser def main(): browser = Browser() browser.visit('http://google.com') brow ...
- SEO优化小技巧
/** * seo优化课程 * 先谢慕课网 */ /** * SEO基本介绍 * SEO与前端工程师 */ /** * SEO基本介绍 * 搜索引擎工作原理:输入关键字------查询------显示 ...
- QPainter类的一些问题
QPainter painter1(this);//新建类 painter1.setRenderHint(QPainter::Antialiasing,true);//设置反锯齿 painter1.s ...
- 双二次Lagrange 有限元计算特征值程序(基于iFEM)
function lambda = c0P2(h) %% Mesh [node,elem] = squarequadmesh([,,,],h); elem = elem(:,[,,,]); showm ...
- Android菜鸟成长记7 -- Android的五大布局
Android五大布局,相信android的都了解过,今天我根据自己的学习整理一下五大布局,主要介绍的是线性布局(LiearLayout),因为,其他的布局使用率不是很高. Android的五大布局 ...
- C#批量插入数据到Sqlserver中的三种方式
本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生 成 ...
- search 搜索
hosts文件路径 C:/WINDOWS/system32/drivers/etc/hosts host tnsnames.ora文件路径 C:/oraclexe/app/oracle/product ...
- [整理]一个有关Latch(锁存器)的有趣问题
起源 今天诳论坛,突然发现了一个有关latch的问题,由于对D Flip-Flop和Latch还有些疑问,就点击了进去,一看果然有些意思,也挺有学习意义的,于是本文就诞生了.喊出口号~Just not ...
- hdu 1398 Square Coins (母函数)
Square Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...