当前位置： >
css3实现input输入框颜色渐变发光效果代码
时间： 17:26 来源： 作者： 浏览：
css3都推出好久了，虽然各大主流浏览器对其兼容性还不是很好，特别是IE…但通过添加-moz- -webkit-这样的前缀可以在chrome和Firefox下获得更好的效果，还是Transition实现的过渡效果
css3都推出好久了，虽然各大主流浏览器对其兼容性还不是很好，特别是IE…但通过添加-moz- -webkit-这样的前缀可以在chrome和Firefox下获得更好的效果，还是Transition实现的过渡效果
给边框实现单击颜色渐变效果，这并不是单纯的box-shadow属性而已，它的发光是像四周均匀发光，它还包含一个缓慢发光过渡效果。
在继续学习之前，你必须要有一些Css3的基础知识。做出这一切需要你了解CSS3的Shadow和RGBa、Transition属性，否则就无法理解了。
1.制作发光边框文本框效果复制代码代码如下:&input type="text" class="sdw" /&然后我们要让这个input组件在被成为焦点（点击）时向四周发光，显示为蓝色，我只需添加一段CSS代码：复制代码代码如下:sdw:focus{transition:border linear .2s,box-shadow linear .5s;-moz-transition:border linear .2s,-moz-box-shadow linear .5s;-webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;outline:border-color:rgba(93,149,242,.75);box-shadow:0 0 8px rgba(93,149,242,.105);-moz-box-shadow:0 0 8px rgba(93,149,242,.5);-webkit-box-shadow:0 0 8px rgba(93,149,242,3);}就可以了。其中的RGB色彩可以根据个人口味进行改变。预览效果如下：
2.为全局所有input组件添加边框发光效果
如果希望一个网页中所有的文字输入框出现这种效果，只需CSS全局设定即可。
在你的CSS文件中添加这么一句：复制代码代码如下:input[type=text]:focus,input[type=password]:focus,textarea:focus{}您现在的位置：>>
>>正文内容
用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框，如微信、Mac版的QQ、QQ空间的时间轴等等，在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着，感觉看着很不错，于是决定亲自动手写一个，我上次用的是偏移背景图片法，那么今天就不用图片，用CSS3实现一下，下面我们来看一下实现代码。首先我们来看一下CSS3实现三角形原理：其实就是对于transparent的应用假如html代码是这样的&div class="arrow-up"&
&!--向上的三角--&
&div class="arrow-down"&
&!--向下的三角--&
&div class="arrow-left"&
&!--向左的三角--&
&div class="arrow-right"&
&!--向右的三角--&
&/div&下面用CSS3分别实现向上、下、左、右的三角形/*箭头向上*/
.arrow-up {
border-left:30
border-right:30
border-bottom:30px solid #
/*箭头向下*/
.arrow-down {
border-left:20
border-right:20
border-top:20px solid #0066
/*箭头向左*/
.arrow-left {
border-top:30
border-bottom:30
border-right:30
/*箭头向右*/
.arrow-right {
border-top:50
border-bottom: 50
border-left: 50
}ok代码整理在一起后，效果大概是这样的：好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的div框。首先，写出html代码：&div class="entry"&
&div class="entry-trangle"&&!--本Div只来实现三角形，无其他作用--&&/div&
hello，我出生了&br/&
hello，我出生了&br/&
hello，我出生了&br/&
hello，我出生了&br/&
&/div&挂载有类&entry-trangle&的div只用来实现小三角形。对这个div用css3的transparent实现三角形，然后绝对定位、设置z-index:-1;、margin-left:-19，看下面css代码：&style type="text/css"&
*{margin:0;padding:0;}
background:#666;
font:14px/20px "Microsoft YaHei";
margin-top:20
background:#
padding:10
/*设置圆角*/
-webkit-border-radius:5
-moz-border-radius:5
border-radius:5
.entry-trangle{
margin-left:-19
border-top:10
border-bottom:10
border-right:10px solid #
z-index:-1;
&/style&border-radius:5用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层，不影响父级div里面的内容布局。好了，我们已经完工了，这是&&&&&&在app应用开发中，我们常常都需要用到来设置应用的样式。由于app都是在移动设备上进行展示，所以边框描边的线一般都小于1px，而以往我们使用的都是1px及以上的。那么问题来了，对于小于1px的边框怎么处理呢？为大家介绍几种css3中细线边框的写法，希望对遇到类似问题的童鞋有帮助。1、做一张高2像素（1像素有颜色1像素没颜色）的图片做背景，bg-size设置宽100%，高1px.line li{
&&&&&&&&&&&&background: url('line.png') left top no-&&&&&&&&&&&&background-size: 100% 1&&&&&&&&&&&&background-position:}&ul class=&line&&&&&&&li&&/li&&&&&&li&&/li&&&&&&li&&/li&&/ul&这种方法有一个问题，就是左右边框描边虽然可以做旋转(transform) ，但如果要是边框更换颜色那岂不是还要再做图片了；2、通过上面的方法，我们也很容易联想到线性渐变（linear-gradient），具体实现如下：.line li{
border:&&background-image: -webkit-linear-gradient(#222 50%,transparent 50%);&&background-image: -moz-linear-gradient(#222 50%,transparent 50%);&&background-image: -o-linear-gradient(#222 50%,transparent 50%);&&background-image: linear-gradient(#222 50%,transparent 50%);&&background-size:
100% 1&&background-repeat: no-&&background-position:}&ul class=&line&&&&&&&li&linear-gradient&/li&&&&&&li&linear-gradient&/li&&&&&&li&linear-gradient&/li&&/ul&这种方法仍然不够完美，改变描边位置（left，top，right，bottom）时需要修改参数，如 left描边需要改变：background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);background-size:
1px 100%;background-position:3、那还有什么方法可以解决细线边框问题呢？我们不妨可以试试了CSS3阴影（box-shadow），用阴影做描边然后用伪类把多余的给遮罩着：.line li{box-shadow: inset 0 -1px 1px #000;background: #margin-left: -1margin-bottom: 10position:}.line li::after{content:'';position:top:0;left: 0right: 0bottom: 0border: 1px solid #}&ul class=&line&&&&&&&li&box-shadow&/li&&&&&&li&box-shadow&/li&&&&&&li&box-shadow&/li&&/ul&虽然，小编分享的几种方法都还存在瑕疵，具体使用哪种方法，你可以根据你的情况而定。如果你有更完美的解决方案的话，也欢迎分享出来，大家一起学习，一起进步。相关文章：《》
(四川成都)
麦子学院，中国IT在线教育领导品牌，
小麦麦子的最新日记
······
&(1人喜欢)
······
就是那么简单几句我办不到 · 1478条内容
博物馆讲述难以言说的历史 · 338条内容
纪念汪老逝世二十周年 · 152条内容
以赤子之心澄澈映照世界 · 106条内容
你是一本读不完的书 · 860条内容
这一天，你在干什么？ · 366条内容
推荐这篇日记的豆列
······
&(1人关注)脚本简介css3实现动画边框菜单是一款基于css3+js实现的概念UI设计网站菜单特效。
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.CSS3卡牌旋转滑动效果-前端开发博客推荐文章 6282Views 985Views 3139Views 2031Views 130Views 3420Views热门文章
1,734Views
1,695Views
1,275Views
1,266Views
1,211Views
1,066Views
对这篇文章不满意吗？百度搜索：");