00002、div的文字垂直居中与背景的渐变
1.div可以放多行的文字,当显示文字较少时,文字可垂直居中
text-align: center;
display: table-cell;
vertical-align: middle;
text-overflow: ellipsis;
2.div的背景色设置为渐变,使效果看起来更像一个按钮(现在默认为绿色)
background-color: #008000; /* 如果浏览器不支持渐变,使用图像作为背景 */
background: -o-linear-gradient(top,#11f9d0, #0B680B);/* Opera 11.10+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#11f9d0), to(#0B680B)); /*Webkit: Safari 4-5, Chrome 1-9*/
background: -ms-linear-gradient(top, #11f9d0, #0B680B);/* Webkit: Safari 5.1+, Chrome 10+,火狐,IE 10 */
background: -moz-linear-gradient(top , #11f9d0, #0B680B) repeat scroll 0% 0% transparent;/* Firefox 3.6+ */
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#33ffff, endColorStr=#0B680B); /*IE < 10 */
aaarticlea/png;base64,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" alt="" /> aaarticlea/png;base64,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" alt="" width="90" height="73" />
3.div的文字进行描边(文字的颜色为橙色,描边的颜色为黑色色)
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; /* 火狐,Chrome */
filter:Dropshadow(offx=1,offy=0,color=red)
Dropshadow(offx=0,offy=1,color=red)
Dropshadow(offx=0,offy=-1,color=red)
Dropshadow(offx=-1,offy=0,color=red); /*IE 10*/
*filter: Glow(Color=#000, Strength=1);
00002、div的文字垂直居中与背景的渐变的更多相关文章
- 关于DIV内文字垂直居中的写法
最近在写UI,或多或少用到了CSS,在这记录一下,今天用到的DIV内文字垂直居中的写法, 因为所做的项目都是基于WebKit内核浏览器演示的,所以我们今天采用的是-webkit-box的写法: dis ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- 实现DIV层内的文字垂直居中(转)
有时候,为了网页设计的美观,需要把div+css设计的页面里的某些div层里的文字垂直居中,包括多行文字以及单行文字:方法有不少,但真正能实现而代码又简洁的介绍不多,flymorn就为大家介绍几种适用 ...
- DIV+CSS如何让文字垂直居中?(转)
此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...
- div中让文字垂直居中
在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...
- DIV+CSS如何让文字垂直居中?
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- select中文字垂直居中解决办法
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对sel ...
随机推荐
- JDFS:一款分布式文件管理实用程序第二篇(更新升级、解决一些bug)
一 前言 本文是<JDFS:一款分布式文件管理实用程序>系列博客的第二篇,在上一篇博客中,笔者向读者展示了JDFS的核心功能部分,包括:服务端与客户端部分的上传.下载功能的实现,epoll ...
- java 与操作系统同步问题(三)————父亲儿子女儿水果问题
问题描述:父亲每次都会放一个水果在桌子上,女儿喜欢吃香蕉(只吃香蕉), 儿子喜欢吃苹果(只吃苹果).父亲每次只会随机往桌子上放一个水果(苹果或香蕉),儿子,女儿会来取.使用p.v操作来完成父亲.儿子. ...
- grunt基础配置
grunt基础配置 要使用grunt来管理项目,一般需要如下的几个步骤: 安装grunt命令行工具grunt-cli 在项目中安装grunt 安装grunt插件 建立并配置Gruntfile.js 安 ...
- hdu_A Walk Through the Forest ——迪杰特斯拉+dfs
A Walk Through the Forest Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/ ...
- Ajax请求(二)--JQuery的Ajax请求方法
JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...
- 踩一踩微信小程序开发的坑---tabBar
最近忙于开发视频直播的项目,小程序学习也放置了两三个星期了,web开发者工具更新到新版,发现上个版本做的demo不显示了
- 第一次使用idea从SVN什么checkout项目,一直都是用的eclipse
IntelliJ IDEA 14 拉取SVN maven 多模块项目 部署tomcat 详细图解! 二话不说 进入主题 我们创建空项目实际上是项目空间 进入主界面 想用svn必须先启用它 选择Su ...
- 锁和监视器之间的区别 – Java并发
在面试中你可能遇到过这样的问题:锁(lock)和监视器(monitor)有什么区别? 嗯,要回答这个问题,你必须深入理解Java的多线程底层是如何工作的. 简短的答案是,锁为实现监视器提供必要的支持. ...
- scrapy代理的设置
scrapy代理的设置 在我的上一篇文章介绍了scrapy下载器中间件的使用,这里的scrapyIP的代理就是用这个原理实现的,重写了下载器中间件的process_request(self,reque ...
- WCF学习——WCF简介(三)
一.WCF简介 1.什么是WCF? WCF的全称是:Windows Communication Foundation.从本质上来说,它是一套软件开发包,是微软公司推出的符合SOA思想的技术框架. 2. ...