CSS新增样式4

1.阴影:box-shadow:none(无阴影)

inset(显示阴影在里面),写法:box-shadow:inset/outset(外阴影)     px(阴影水平偏移值) px(阴影垂直为负)  px(阴影模糊值不为负) color;

总结:三个数值时,阴影的外延值就不存在了;两个数值时,阴影的模糊度和外延值就不存在了,默认颜色为黑色,水平偏移值和阴影垂直大于0出现在左和上,小于0出现                              在右和下 。

2.圆角:border-radius:px(上) px(右) px(下) px(左);如果要设置椭圆代码如下:

例:width:100px; height:200px;   border-radius:100px/200px(正椭圆)

3.边框图片background-image: {a.source(路径) b.slice(分割方式) c.width(宽度 )d.outset(扩展) e.repeat(平铺方式) f.strech(拉伸)}

4.背景滚动或固定:background-attachment

5.背景大小 :background-size:cover(被包含在容器内,在整个框内显示,不标准,等比例缩放)/contain(图片完全放置在容器内)

6.裁剪:background-clip:border-box(向外裁剪)/padding-box(在边框以内)/content-box(包含内容包含padding)

7.背景线性渐变:谷歌写法:background:-webkit-gradient     linear(值的名称)   x ,y(两个坐标开始)  x,y(两个坐标结束),from(red) to(blue)【从一个颜色向另一个颜色渐变】

火狐:background:-moz-linear-gradient(top,red,blue)

opera:background:-o-linear-gradient(top,red,blue)

IE:-ms-linear-gradient 后面同上

8.文本效果

                1.阴影:text-shadow

2.文本溢出:text-overflow      ellipsis显示省略标记,需要结合overflow:hidden和white-space:nowrap不换行。

3.连续文本换行:word-wrap{a.normal默认  b.break-word在边界内换行,如果需要词内也可换行

4.文本轮廓:text-outline绝大多数浏览器不兼容

时间: 2024-10-22 23:15:29

CSS新增样式4的相关文章

CSS新增样式3

1.透明度:opacity 2.确立元素的层次关系:z-index 3.clip:auto剪裁内容,适用于图片,方向是上右下左,必须加绝对定位才可见 4.overflow:hidden隐藏超出的部分 scorll滚动条 auto自动 5.播放视频(默认三种格式:MP4 webm ogg) <video.  controls="controls"> <source src=""type="MP4"autoplay自动播放   lo

css新增UI样式

一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body> <h1>中山大学</h1> </body> 效果 rgba透明度(选中的就透明)一般应用在背景透明,文字不透明.是rgb的一个拓展,a的值在(0,1)之间,就是针对前面的颜色的一个透明度/不透明度的描述. h1{ margin: 100px auto; color:

第 15 章 CSS 文本样式[下]

学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课,我们重点了解一下 CSS 文本样式中文本内容的一些设置方法,样式表如下: 属性名 说明 CSS 版本 text-decoration 装饰文本出现各种划线. 1 text-transform 将英文文本转换大小写. 1 text-shadow 给文本添加阴影 3 text-align 设置文本对齐方

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6

CSS重置样式表

一.为什么需要重置样式表 即使不写CSS样式,HTML标签在浏览器中也有样式,这些样式来自浏览器本身.但问题是,不同浏览器默认样式可能不同.CSS重置样式表就是为了解决这个问题. 二.常用的重置样式表 (1)简单暴力型 只有一行: *{margin:0; padding:0;} 通配符"*"匹配了所有的标签,通常认为性能不好. (2)归零型 (几乎)全部将标签样式清零.如YUI(http://yuilibrary.com/)的重置样式表. (3)保留基础样式型 并不是将所有标签的默认样

CSS常用样式(四)之animation

上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观. animation animation的实现需要通过keyframes来实现.keyframes(关键帧),类似于flash当中的关键帧.关键帧有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样

css折叠样式(1)——使用css样式的三种方式

一.css的声明标签是告诉浏览器应该是用什么形式去解析你,一般为:<!DOCTYPE html>  因为html5支持向下兼容,详细可看上图. 二.css样式的使用方式: (1)内链样式表: demo.html <!DOCTYPE html> <html> <head>     <title>内链样式使用</title>     <meta charset="utf-8"> </head>

使用css文本样式的6种方法

很多web前端初学者 http://www.maiziedu.com/course/web/在学习css样式时,对文本内容的修饰需要用到css文本样式进行修饰.由于在层叠关系中,内容要高于背景.所以文本样式相对而言更加重要.有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容.本文将详细介绍文本相关样式. 首行缩进 定义 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格,类似于此. [注意]该属性可以为负值 text-ind

CSS基本样式

CSS基本样式 内联样式:直接在页面文件中使用HTML标记的style属性.例如: <p style="font-family:宋体;color: red;font-size: 10pt;">程序员</p> 在页面文件中定义样式:这种方式是通过<style>标记来定义样式,语法格式如下: <style type="text/css"> h1 {font-family: "微软雅黑";font-siz