boolan web Ex笔记三关于button以及部分CSS3属性

最新推荐文章于 2024-05-27 22:24:24 发布

wjxuanxuan

最新推荐文章于 2024-05-27 22:24:24 发布

阅读量587

点赞数 1

分类专栏： Boolan 文章标签： web

本文链接：https://blog.csdn.net/renlangwww/article/details/55506456

版权

Boolan 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这里写图片描述
要求实现查询车票：细节上要求渐变色。从左到右从上到下有一个渐变过程。在left top的颜色取值为#ff9f24，在right bottom的颜色取值为#fe781e。button长420px，宽100px。

一 RGBA值

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式实现透明度，可使用 IE 滤镜处理，如：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000)
//#88000000 的前两位数字控制透明度，取值16进制从00 -> FF（越小越透明），00表示完全透明，FF就是全不透明，后面六位是色值。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>RGBA_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="" />
<style>
.test {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000); /* IE5.5 - IE8 */
    background: rgba(0, 0, 0, .5); /* 其他浏览器 */
    zoom: 1; /* 滤镜需要激活haslayout才能生效 */
}
:root.test {
    filter: none; /* IE9下需要关闭滤镜，否则会与背景色同时生效 */
}
</style>
</head>
<body>
<div class="test">此行的背景色为50%透明度的黑色</div>
</body>
</html>

二 text-shadow 文字阴影

text-shadow 文字阴影由以下顺序构成：x-offset, y-offset, blur, and color，即垂直偏移、水平偏移、投影宽度（模糊半径）和颜色。

text-shadow: 0 1px 1px rgba(0,0,0,.3);

如果对水平偏移（x-offset）应用负值，阴影将出现在元素的左边；
如果对垂直偏移（y-offset）应用负值，阴影将出现在元素上部，
可以在阴影颜色上使用RGBa。
模糊半径的值越大，阴影越模糊，设置为0时，阴影最清晰
真是惨自己写例子参数中间用的逗号，真是灯下瞎找了半天才找到-。- 毙了狗。

 <button  style=" display: inline-block;height: 80px;width: 200px; font-size:55px;font-weight:bold;font-family: '微软雅黑';  text-shadow: 0 1px 1px red; ">查询</button>

text-shadow可以接受多组参数，从而实现文字凸起，发光字体等效果。

三 Border Radius 边框弧度

<button style=" display: inline-block;height: 80px;width: 200px; -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em; ">查询</button>

将边框直角改变为弧度

四 Box Shadow

box-shadow的属性结构和text-shadow类似：x-offset, y-offset, blur, and color.

也像text-shadow一样可以接受多个参数这里要注意版本兼容：-moz-box-shadow: -webkit-box-shadow: box-shadow: 。

五渐变色

渐变色需要预留退路：如果用户代理不支持CSS 3，则显示没有渐变和阴影的普通按钮
在各个浏览器上实现渐进色有所区别

.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

http://www.w3cplus.com/content/css3-gradient 这篇讲渐进色较为详细

这里写代码片

六 button的实现

5.1 按钮的状态

正常状态：有边框的渐变和阴影
鼠标悬停：比较暗的渐变
鼠标按下：翻转渐变，1xp下沉，更深的字体颜色
先来实现正常状态
5.2 正常状态
需要实现的效果为：下图

渐变色，无边框，无阴影。
字体为 36px 微软雅黑白色
边框有弧度
有边框阴影。
效果要求是没有边框的，当设置了“border: 0px;”后。button的点击效果将消失，要自己设计点击效果。
这里用伪类来实现。:hover 表示选中是加进去的样式；：active点击后进行的动作。

.button{
    display: block;
    margin: auto;
    width: 420px;
    height: 100px;
    font-family: "微软雅黑";
    font-size:36px;
    color: white;
    border: 0px;
    border-radius: 0.3em;/*设置边的弧度*/
    cursor: pointer;/*鼠标移上去光标变化*/
}

/*渐变色*/
.orange {
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, right bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(left,  #faa51a,  #f47a20);
    /*linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    /*button的阴影*/
    -moz-box-shadow: 5px 5px 30px rgba(252,233,166,0.5),-5px -5px 30px rgba(252,233,100,0.5); 
    -webkit-box-shadow: 5px 5px 30px rgba(11,11,11,0.5),-5px -5px 30px rgba(252,233,100,0.5) ;
    box-shadow:5px 5px 30px rgba(252,233,166,0.5),-5px -5px 30px rgba(252,233,100,0.5) ;

}

/*由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下：*/
:root .orange{filter:none;}

5.3 选中时
选中时用伪类来实现。

：hover 在选中时给元素添加样式。

    .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, right bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(left, #f88e11, #f06015);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }

5.4点击

 .button:active{
        position: relative;
        top: 1px;
    }/*我想捅死自己的-。- 把active 拼成了 acitve 死命的找也不知道为什么不响应，WTF开发者模式就不能有个提示，真是醉了。折腾了一个小时是有的。我......*/
 .orange:active{
        color: #fcd3a5;
        background: -webkit-gradient(linear, left top, right bottom, from(#f47a20), to(#faa51a));
        background: -moz-linear-gradient(left, #f47a20, #faa51a);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    }
    /*由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下：*/
 .orange:root {
        filter: none;
    }

<div class ="buttonContainer">  <button class="button orange">查 询 车 票</button> </div>

未选中前效果为
这里写图片描述

选中时效果为
这里写图片描述

按下后BUTTON会下移1px并得到如下效果。字体颜色与背景颜色都有变化
这里写图片描述

wjxuanxuan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录