颜色阴影边框怪异盒子按钮

敲敲敲之

于 2024-07-23 14:15:07 发布

阅读量586

点赞数 27

分类专栏： HTML CSS 文章标签： css html 前端 css3 html5

本文链接：https://blog.csdn.net/m0_72498273/article/details/140634900

版权

HTML CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. CSS3颜色

(1) 、十六进制颜色

所有主要浏览器都支持十六进制颜色值。

指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。

p{background-color:#ff0000;

}

(2) 、RGB颜色

RGB颜色值在所有主要浏览器都支持。

RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。

p{background-color:rgb(255,0,0);

}

(3) 、RGBA颜色

RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。

RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。

RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数

p{background-color:rgba(255,0,0,0.5);

}

(4) 、HSL颜色

IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。

HSL代表色相，饱和度和亮度 - 使用色彩圆柱坐标表示。

HSL颜色值指定：HSL（色调，饱和度，明度）。

色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值; 0％意味着灰色。100％的阴影是全彩。亮度也是一个百分点; 0％是黑色的，100％是白色的。

p{background-color:hsl(120,65%,75%);

}

(5) 、HSLA颜色

HSLA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.

HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。

指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

p{background-color:hsla(120,65%,75%,0.3);

}

2、CSS3 阴影

(1)、CSS3 文本阴影

您指定了水平阴影（向右），垂直阴影（向下），模糊的距离（数值越大越模糊），以及阴影的颜色：:

h1{

text-shadow: 5px 5px 5px #FF0000;}

(2)盒子阴影

盒子阴影:box-shadow:x y 模糊度模糊大小颜色 inset insite(是内阴影，如果让阴影在里边加这个属性) 文字阴影:text-shadow:x y 模糊度颜色背景原点:background-origin:border-box/padding-box/content-box 背景裁切:background-clip:padding-box/border-box/content-box

(3)CSS3文本溢出

CSS3文本溢出属性指定应向用户如何显示溢出内容

p.test1 {

//文本不换行 white-space: nowrap; width: 200px; border: 1px solid #000000;

//多余的部分隐藏掉 overflow: hidden;

//修剪文本。 text-overflow: clip; }

p.test2 { white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

//显示省略号来代表被修剪的文本 text-overflow: ellipsis; }

3. CSS3 边框

(1)、CSS3 圆角

在div中添加圆角元素

div{border:2px solid;

border-radius:25px;

}

变成圆形：border—radius：50%或等于宽高;（盒子必须是正方形）

变成柱形：border—radius：等于高度的一半；

(2)、CSS3 边界图片

border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像，在 div 中使用图片创建边框:

div{

border: 30px solid blue;border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-image:url(border.png) 30 30 round; /* Opera */

}

(1) 、CSS3 实现三角形

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

4. 怪异盒子

(1) CSS3 box-sizing 属性

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

box-sizing: content-box|border-box|inherit:

值	说明
content-box	这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	指定 box-sizing 属性的值，应该从父元素继承