CSS属性设置

最新推荐文章于 2024-02-21 12:01:39 发布
最新推荐文章于 2024-02-21 12:01:39 发布
阅读量382 收藏
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kyowill1988/article/details/79597165
版权

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>New CSS3 styles</title>
	<link rel="stylesheet" href="mystyles-csstest.css">
</head>

<body>
<header id="mainbox">
	<span id="title">CSS Styles Web 2.0</span>
</header>
</body>
</html>

CSS代码如下：

body{
	text-align:center;
}

#mainbox{
	display:block;
	width:500px;
	margin:50px auto;
	padding:15px;
	text-align:center;
	border:1px solid #999999;
	background:#DDDDDD;
	
	/* 圆角实现 */
	
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	
	/* -moz-border-radius:20px 10px 30px 50px; */
	/* -webkit-border-radius:20px 10px 30px 50px; */
	/* border-radius:20px 10px 30px 50px; */
	
	/* -moz-border-radius:20px / 10px; */
	/* -webkit-border-radius:20px / 10px; */
	/* border-radius:20px / 10px; */
	
	/* 阴影效果 */
	-moz-box-shadow:rgb(150,150,150) 5px 5px;
	/* -webkit-box-shadow:rgb(150,150,150) 5px 5px; */
	/* box-shadow:rgb(150,150,150) 5px 5px; */
	/* box-shadow:rgb(150,150,150) 5px 5px 10px; */
	/* box-shadow:rgb(150,150,150) 5px 5px 10px inset; */
	
	/* 线性渐变 */
	/* background:-moz-linear-gradient(top,#FFFFFF,#006699); */
	/* background:-webkit-linear-gradient(top,#FFFFFF,#006699); */
	/* background:-webkit-linear-gradient(30deg,#FFFFFF,#006699); */
	/* 放射渐变 */
	background:-webkit-radial-gradient(center,circle,#FFFFFF 0%,#006699 200%);
	
	/* 轮廓 */
	/* outline:2px dashed #000999; */
    /* outline-offset:15px; */
	
	/* 边框图像 */
	/* border-image:url("diamonds.png") 29 stretch; */
	
	
	/* -moz-transform:scale(1,-1); */
    /* -webkit-transform:scale(1,-1); */
	
	/* -moz-transform:rotate(30deg); */
    /* -webkit-transform:rotate(30deg); */

	/* -moz-transform:skew(30deg); */
    /* -webkit-transform:skew(30deg); */
	
	/* -moz-transform:translate(100px); */
    /* -webkit-transform:translate(100px); */

	/* -moz-transform:translateY(100px) rotate(45deg) scale(0.3); */
    /* -webkit-transform:translateY(100px) rotate(45deg) scale(0.3); */
	
	-moz-transition:-moz-transform 1s ease-in-out 0.5s;
    -webkit-transition:-webkit-transform 1s ease-in-out 0.5s;

}


#mainbox:hover{
	-moz-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
}

#title{
	font:bold 36px myNewfont,verdana,sans-serif;
	/* text-shadow:rgb(0,0,150) 3px 3px 5px; */
	text-shadow:rgba(0,0,0,0.5) 3px 3px 5px;
	color:hsla(120,100%,50%,0.5);
}

@font-face{
    font-family:'myNewfont';
    src: url('font.ttf')    
}

圆角
    border-radius:20px;
    border-radius:20px 10px 30px 50px;//依次为左上、右上、右下、左下顺时针方向
    border-radius:20px / 10px;//依次为水平半径、垂直半径        

阴影
    border-shadow:rgb(150,150,150) 5px 5px;//依次为颜色、水平偏移量、垂直偏移量
    box-shadow:rgb(150,150,150) 5px 5px 10px;//增加一个或多个像素会扩大阴影范围
    box-shadow:rgb(150,150,150) 5px 5px 10px inset;//inset可以将外部阴影转变为内部阴影，从而设置框的深度效果

阴影不会扩大元素范围，也不会增加其尺寸，所以必须仔细检查足以显示阴影的可用显示空间。

文字阴影
    text-shadow:rgb(0,0,150) 3px 3px 5px;

@font-face
    设置字体，至少需要两个属性，分别声明字体和加载文件，如：
    @font-face{
    font-family:'myNewfont';
    src: url('font.ttf')     
}
    然后在font属性中设置该字体‘myNewfont’

线性渐变
    渐变是通过背景设置的，所以必须使用background或background-image属性。这些属性的语法是：linear-gradient(start position,from color,to color)。第一个值可以是像素值、百分比或关键字top、bottom、left和right。    

放射渐变
    radial-gradient(center,circle,#FFFFFF 0%,#006699 200%)。
    形状支持两个值：circle、ellipse

RGBA
    CSS3增加了新的函数rgba()，它支持设置颜色值和透明度，也解决了opacity属性的问题。
    如：rgba(0,0,0,0.5) 最后一个值表示透明度。

HSLA
    语法是：hsla(hue,saturation,lightness,opacity)//色度、饱和度、亮度、透明度
    如： color:hsla(120,100%,50%,0.5)
    色度表示从假想圆盘抽取的颜色值，色度范围为0~360，0与360附近是红色，120附近是绿色，240附近是蓝色。
    饱和度是一个百分比数，范围是0%（灰度）~100%（全彩色或全饱和）
    亮度范围是0%（全暗）~100%（全亮）

轮廓
    outline:2px dashed #000999;
    outline-offset:15px;

边框图像
    border-image属性使用一幅图像作为图案，需要指定三个属性：图像文件名称与位置、分割图案得到的块数和指定各部分围绕对象分布方式的关键字。
    指定各部分围绕对象分布方式可设置为：stretch、repeat、round

转换与转变
    transform属性可以对对象执行4中基本的转换：scale、rotate、skew、translate。
    转换效果：缩放
        -moz-transform:scale(2);
        -webkit-transform:scale(2);
        scale函数可以接收两个参数，X值表示水平缩放比例，Y值表示垂直缩放比例。
        缩放操作可以使用整数值和小数值。缩放是通过矩阵计算的。0~1表示缩小元素，1表示保持原始比例，而大于1的值表示增加对象的尺寸。

    转换效果：旋转
        -moz-transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
    rotate函数可以使元素按顺时针方向旋转。这个值必须使用带“deg”单位的角度值。
    
    转换效果：倾斜
        -moz-transform:skew(30deg);
        -webkit-transform:skew(30deg);
    skew函数会按角度和方向改变元素的对称性。skew有两个参数，每一个参数都只影响一个方向。
        
    转换效果：移动
        -moz-transform:translate(100px);
        -webkit-transform:translate(100px);
    translate函数接受的两个值分别控制元素在水平和垂直方向的移动。

    一次实现全部转换
        使用空格分隔多个函数，就可以实现组合型transform属性。
        注意：函数的顺序是非常重要的，有一些函数会移动对象的原点和中心，因此会改变其他函数的参数值。
        
动态转换
    结合伪类选择器:hover实现动态转换

过渡
    transition属性可用于移动元素--实现移动操作的其余步骤，可设置4个参数。
    第一个参数创建过渡步骤。
    第二个参数设置过渡的持续时间。
    第三个参数设置为：ease、linear、ease-in、ease-out、ease-in-out。这个关键字通过贝塞尔曲线决定过渡过程的路径。
    第四个参数是延迟时间。它表示多长时间之后过渡过程开始启动。

    如：   
        -moz-transition:-moz-transform 1s ease-in-out 0.5s;
        -webkit-transition:-webkit-transform 1s ease-in-out 0.5s;







    


代码小猫熊
关注
专栏目录
ccs知识点总结
baidu_37573266的博客
02-25 1926
介绍 ccs主要用于网页的布局和格式、主要知识点选择器css：用一个单独文件设置统一样式大大提高了网页开发的效率 引入ccs 内联*********8外链    选择器 - 选择器{ 键（属性）：值； 键（属性）：值； . . . } ---选择器可以写：标签、便签名，'.类名'、 '#id名'  还可以一“属性”作为选择 eg:[属性=
CSS布局常用属性介绍
最新发布
m0_75116965的博客
07-27 1583
本文介绍了一些常用的css属性
CSS 的属性设置
零基础学习Python的博客
12-16 453
CSS属性设置 字体属性 文字粗细：font-weight 取值 描述 normal 默认值，标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
css属性设置
yikenaoguazi的博客
09-17 657
day53一.字体属性验证二.文本属性验证三.背景属性1.background-color2.background-image3.background-size4.background-repeat5.background-attachment6.background-position7.inherit8.背景缩写验证练习1练习2练习3四.盒子模型1.什么是盒子模型?2.盒子模型的宽度和高度3.css显示模式:块级,行内,行内块级4.css显示模式转换5.div与span代码验证边框:border边框详细介
jQuery 设置 CSS 属性示例介绍
10-26
首先，提到“jQuery 设置 CSS 属性示例介绍”这一标题，它直接指明了文章将围绕如何利用jQuery进行CSS属性设置进行说明，而“设置指定的CSS属性或设置多个CSS属性”这部分描述，则解释了文章将涵盖两个方面的内容：...
Jquery删除css属性的简单方法
10-20
但是，我们仍然有简单而有效的方法来达到移除CSS属性的目的，那就是通过jQuery的“.css()”方法，将该CSS属性的值设置为空字符串，即直接赋值为空''，从而实现删除的效果。 使用jQuery来删除CSS属性的基本语法是： ...
jQuery css() 方法动态修改CSS属性
10-21
设置单个 CSS 属性值时，css() 方法接受两个参数，第一个参数为 CSS 属性名称，第二个参数为相应的值。例如，若要将 div 元素的背景颜色设置为黄色，可以使用：$("div").css("background-color", "yellow")。 设置...
深入理解CSS height属性设置元素的高度
12-13
height属性设置元素的高度。注意： height属性不包括填充，边框，或页边距！本文章向码农介绍CSS 高度height 的使用方法和基本实例，需要的css码农可以参考一下。 css height高度简介 这里的CSS高度是指通过CSS来...
CSS设置属性
weixin_30457881的博客
03-17 118
1. 文本格式化： 控制字体： ---指定字体： font-famliy：value1，value2 字体大小： ----font-size：value； 字体加粗： ----font-weight:normal/bold; 控制文本格式： --文本颜色： ---color：value ---文本...
CSS属性
渣渣的夏天
04-10 609
CSS样式属性 CSS背景属性 Background-color:设置元素的背景颜色 属性值： Color_name:颜色值为颜色名称的背景颜色(比如：red) Hex_number:颜色值为十六进制值的背景颜色(比如：#FF0000) Rgb_number:颜色值为rgb代码的背景颜色(比如：rgb(255,0,0)) Transparent:默认。背景颜色为透明。 Bac...
两分钟了解如何设置CSS属性值
程展威的博客
07-11 301
掌握设置css的属性值的方式。在CSS世界飞驰。 夜阑更秉烛，相对如梦寐。——《羌村·其一》
CSS基础属性
weixin_48183870的博客
02-21 1686
可以使用像素（px）、百分比（%）或其他单位来指定缩进值。（宽度）：用于设置元素的宽度。（文本装饰）：用于设置文本的装饰效果，如下划线、删除线等。（最小宽度）：用于设置元素的最小宽度，确保元素的宽度不会小于指定的值。（最小高度）：用于设置元素的最小高度，确保元素的高度不会小于指定的值。（最大宽度）：用于设置元素的最大宽度，防止元素的宽度超过指定的值。（最大高度）：用于设置元素的最大高度，防止元素的高度超过指定的值。（文本对齐）：用于设置文本在容器中的对齐方式。（高度）：用于设置元素的高度，使用方式与。
js修改css属性、html属性
热门推荐
~~
05-11 1万+
js修改html属性： 1.document.getElementById('cloimg').setAttribute("src","/home/images/open.gif");---正确 2. $('#cloimg').setAttribute("src","/home/images/open.gif");---？？？待验证 js修改css属性： 1.id/clas
css中增加的一些属性
weixin_46079002的博客
08-31 270
文本属性,颜色属性,背景属性,边框属性 四大属性开始入手 文本属性:文本阴影 属性:text-shoadow 属性值:常用的属性有4个 第一个属性表示水平方向 10px 第二个属性值表示垂直方向 10px 第三个属性值表示模糊程度 2px 第四个属性值表示的颜色值 (多种写...
css新增属性
qq_63453268的博客
11-18 306
一、盒子阴影 box-shadow:阴影水平位置 阴影垂直位置 模糊度(值越大，越模糊） 阴影范围(值越大，越模糊) 阴影颜色 阴影的内外位置（inset、outside); box-shadow:0px 0px 0px 0px red; 阴影可以添加多个，在第一个效果后，用逗号隔开，继续写第二个效果 box-shadow:0px 0px 0px 0px red，0px 0px 0px 0px red; ...
css_css3新增属性
qq_57226103的博客
04-13 1837
w3c提出的某个css属性，再被浏览器正式支持前，浏览器厂商会根据浏览器内核，使用私有前缀来测试该属性，浏览器正式支持改属性后，就不需要该前缀了，Chrome、Safari和Edge浏览器私有前缀。动态伪类选择器、目标伪类选择器、UI伪类选择器、语言伪类选择器、结构伪类选择器、否定伪类选择器、伪原素选择器。表格单元格(table、thead、tbody、tfoot、th、td、tr、caption)、column-span为all原素(即使该原素没有包裹在多列容器中)、绝对定位、固定定位原素、
css属性设置盒子模型为10，20.30.40
05-25
这不是一个有效的 CSS 属性设置。如果你想设置盒子模型的尺寸，可以使用以下 CSS 属性： 1. width：设置盒子的宽度； 2. height：设置盒子的高度； 3. padding：设置盒子内边距； 4. margin：设置盒子外边距。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值