前端大本营

HTML5，CSS3，Responsive，资料站
2015 03/25 周三

text-shadow 为文字追加阴影 —— CSS3 参考 文本单元

text-shadow 说明

text-shadow属性, 为文字追加阴影 。<向文本设置阴影。>

属性值

none 不为文本追加阴影。（默认值） h-shadow 阴影水平方向的距离 <必需。水平阴影的位置。允许负值。> v-shadow 阴影垂直方向的距离 <必需。垂直阴影的位置。允许负值。> blur 阴影渐变半径 <可选。模糊的距离。> color 阴影的颜色 <可选。阴影的颜色。> 以上的属性可以作为一个数组，复数阴影设置的时候，可以以 ， 来区分。 如果想给元素div追加阴影的场合，请参考 box-shadow
※<>内容为其他网站转载内容 实例代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style>
h1.sample1 {text-shadow: 5px 5px 2px blue;}
h1.sample2 {text-shadow: 5px 5px 2px blue , -5px -5px 1px red;}
</style>

</head>

<body>
<h1 class="sample1">text-shadow例1</h1>
<h1 class="sample2">text-shadow例2</h1>	
</body>
</html>
实例图 text-shadow
更多技术问题，可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 文本单元 | text-shadow 为文字追加阴影 —— CSS3 参考 文本单元已关闭评论
2015 03/13 周五

Chrome, Firefox, Safari, IE10, IE11 各个浏览器 CSS hack大集合

适用于Chrome和Opera的 CSS hack写法 以下两种方法都适用，效果是一样的 
/*适用于Chrome和Opera的 CSS hack*/
_::content, _:future, .css_selector:not(*:root) { 
  background-color: ForestGreen;
}

/*适用于Chrome和Opera的CSS hack*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .css_selector {
    background-color: ForestGreen;
  }
}
适用于Firefox的 CSS hack写法 
/*适用于Firefox的CSS hack*/
@-moz-document url-prefix() {
  .css_selector {
    background-color: OrangeRed;
  }
}
适用于Safari的CSS hack写法 
/*适用于Safari的CSS hack*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ::i-block-chrome, .css_selector {
    background-color: LightSteelBlue;
  }
}
适用于Internet Explorer10和11的 CSS hack写法 
/*适用于IE10以后的所有版本*/
@media all and (-ms-high-contrast:none){
  .css_selector {
    background-color: LightSkyBlue;
  }
}

/*适用于IE11*/
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .css_selector {
    background-color: LightSkyBlue;
  }
}
更多技术问题，可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags:
Posted in CSS最新技术 | Chrome, Firefox, Safari, IE10, IE11 各个浏览器 CSS hack大集合已关闭评论
2015 03/03 周二

text-wrap 指定文本换行的方法 —— CSS3 参考 文本单元

text-wrap 说明

text-wrap 属性, 指定文本换行的方法 。<规定文本的换行（折行）规则。>

属性值

normal 按照换行规则进行换行。（默认值）<只在允许的换行点进行换行。> none 不换行，超过div元素边框时，会溢出<不换行。元素无法容纳的文本会溢出。> unrestricted 在一行的两个文字元素间任意换行。<在任意两个字符间换行。> suppress 在没有其他合理的换行位置的时候，使用该换行。<压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。>
※<>内容为其他网站转载内容 实例代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> text-wrap </title>
<style>
p.sample1 , p.sample2 , p.sample3 , p.sample4 {
width:40px; margin-right:50px; background-color:yellow;
float:left;
}
p.sample1 {text-wrap:normal;}
p.sample2 {text-wrap:none;}
p.sample3 {text-wrap:unrestricted;}
p.sample4 {text-wrap:suppress;}

div.sample0 {clear:both;}
</style>

</head>

<body>
<div class="sample0">从左开始指定 normal、none、unrestricted、suppress</div>

<p class="sample1">床前明月光，疑是地上霜，举头望明月，低头思故乡。</p>
<p class="sample2">床前明月光，疑是地上霜，举头望明月，低头思故乡。</p>
<p class="sample3">床前明月光，疑是地上霜，举头望明月，低头思故乡。</p>
<p class="sample4">床前明月光，疑是地上霜，举头望明月，低头思故乡。</p>

<div class="sample0">从左开始指定 normal、keep-all、loose、break-strict、break-all を指定</div>

<p class="sample1">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample2">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample3">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample4">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>

<div class="sample0">从左开始指定 normal、none、unrestricted、suppress</div>
</body>
</html>
实例图 text-wrap
更多技术问题，可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 文本单元 | text-wrap 指定文本换行的方法 —— CSS3 参考 文本单元已关闭评论
2015 03/02 周一

使用 -webkit-overflow-scrolling 在iOS下更顺滑的实现滚动条功能

手机浏览页面时，有的div要素中要显示滚动条， 比如网站利用说明文的部分，需要用滚动条来表示。 虽然手机没有办法像PC一样显示滚动条。可是在CSS中使用 -webkit-overflow-scrolling:touch; 可以在手机端中显示滚动条。 下面就是 -webkit-overflow-scrolling:touch; 的使用方法。 ■ 手机端　在DIV要素中显示滚动条的方法 -webkit-overflow-scrolling 有 auto，touch两个属性值。 
.content {
    height: 200px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch
}
这样在iOS手机端里就可以看到滚动条了。 ■ iPhone3GS、iPhone4等手机，显示比较卡顿 使用一下样式进行GUP指定 
div.contents-ga-overflow-suruyo > * {
    -webkit-transform: translateZ(0px);
}
Tags: ,
Posted in 本站原创 | 使用 -webkit-overflow-scrolling 在iOS下更顺滑的实现滚动条功能已关闭评论
Copyright © 2004~2019 日星网 . All rights reserved.
MEMORY PEAK : 105916 KB | Administrator