text- 属性 border-radius, box-shadow, text-shadow, background, text-overflow

border-radius : none | <length>{1,4} [ / <length>{1,4} ]?

相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

取值:

<length>
由浮点数字和单位标识符组成的长度值。不可为负值。
border-top-left-radius:
由浮点数字和单位标识符组成的长度值。不可为负值。 

说明:

  1. 第一个值是水平半径。
  2. 如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
  3. 如果任意一个值为0,则这个角是矩形,不会是圆的。
  4. 值不允许是负值。

  radius,就是半径的意思。用这个属性可以很容易做出圆角效果,当然,也可以做出圆形效果。原理很简单,“正方形的内切圆的半径等于正方形边长的一半”。下面就做一个红色的圆。

语法:

box-shadow<length> <length> <length> <length> || <color>

取值:

<length> <length> <length>? <length>? || <color>
阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色 

说明:

设置块阴影

box-shadow这个属性应用的非常普遍,可以使你的元素立刻变得漂亮起来,只是记得不要把值设得太离谱。

box-shadow的四个参数:

x-offset                         x轴偏移

y-offset                         y轴偏移

blur                            模糊值

color of shadow               阴影颜色

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 : 无

取值:

<color> :
指定颜色。
<length> :
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> :
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。

说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow

  text-shadow是可以省略前缀的几个CSS属性之一,类似的还有box-shadow,它必须应用于文本,并它们有相同的四个参数:

  x-offset                水平位移

  y-offest                垂直位移

  blur                      模糊值

  color of shadow         阴影颜色

语法:

background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]

相关属性: background-image | background-origin | background-clip | background-repeat | background-size | background-position

取值:

<background-image>
指定或检索对象的背景图像。
<background-origin>
指定背景的显示区域。
<background-clip>
指定背景的裁剪区域。
<background-repeat>
设置或检索对象的背景图像是否及如何重复铺排。
<background-size>
指定背景图片的大小。
<background-position>
设置或检索对象的背景图像位置。

语法:

text-overflow : clip | ellipsis

取值:

clip:
不显示省略标记(...),而是简单的裁切。
ellipsis:
当对象内文本溢出时显示省略标记(...)
时间: 2024-11-10 23:18:36

text- 属性 border-radius, box-shadow, text-shadow, background, text-overflow的相关文章

使用innerHTML生成的script节点不会发出请求与执行text属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div> <script> var boxEl = document.querySelector('#box') boxEl.innerH

background-clip:text属性

webkit内核下,background-clip还有一个text属性,配合webkit内核的私有属性text-fill-color:transparent可以制作背景图片填充文本的效果: 在360浏览器,Firefox,Google chrome,Opera都能显示出以下效果: 在IE上显示不出来效果,如下图:

MaskEdit组件的EditText属性和Text属性

MaskEdit组件主要是EditMask属性 是string属性. 掩码字符串EditMask属性分为3个部分,分别用分号隔开,形式是“XXXXX;X;X” 第一部分是掩码字符串的主要部分,它确定输入数据的格式,由一系列制定的特殊字符构成.其中用到的字符和意义见表 第二部分决定是否将掩码中的非格式字符串作为数据的一部分,0表示不作为数据的一部分,1表示作为数据的一部分,他将影响Text属性值. 第三部分支出在掩码中用来代表未输入数据的字符. EditText和Text 属性都可以用来读取用户输

C# 利用TextBox的Text属性实现换行加字符 &quot;\r\n&quot;

要让一个TextBox显示多行文本就得把它的Multiline属性设置为true,可是如果你是要把TextBox的Text属性设置多行文本时,换行符由两个字符组成:"\r\n". TextBox1.Text = "First \nSecond \nThird ";运行的时候不会换行. 其实主要是因为TextBox运行在Windows上.Windows能够显示的换行必须由两个字符组成:"\r\n". 如果只是"\n"在Windo

Script text 属性

参考 Script text 属性 原文地址:https://www.cnblogs.com/kunmomo/p/12054250.html

C# 批量刷新TextBox控件Text属性

C#Win Form界面有时候需要批量清空当前界面的TextBox Text属性,逐个清空耗时耗力,此时我们可以利用当前界面的Controls来操作,代码如下: //清空所有文本框            foreach (var item in this.Controls)            {                if (item is TextBox)                {                    TextBox tb = new TextBox();

dropdownlist控件的几个属性selectedIndex、selectedItem、selectedValue、selectedItem.Text、selectedItem.value的区别

转自http://blog.csdn.net/iqv520/article/details/4419186 1. selectedIndex——指的是dropdownlist中选项的索引,为int,从0开始,可读可写 2. selectedItem——指的是选中的dropdownlist中选项,为ListItem,只读不写 3. selectedValue——指的是选中的dropdownlist中选项的值,为string, 只读不写 4. selectedItem.Text——指的是选中的dro

css基础-Background&amp;Text

css基础-Background&Text     以下笔记为复习css的一些基础,每一节我都做了一个简单的总结事例,以便参考: 1 /*CSS 属性定义背影效果: 2 3 background-color 定义了元素的背景颜色. 4 background-image 定义了元素的背景图像. 5 background-repeat 定义是否重复 6 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 7 background-position 改变图像在背景中

CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分等分布方式以及如何处理可用的空间.使该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz).chrome(-webkit

text属性

-------------------------------------------------------------------------------- 对p标签进行样式的设置 text-justify:inter-word; 增加/减少单词的间隔只在IE及部分浏览器上支持 text-align: justify;两端对齐 text-align:auto; 浏览器自行决定算法 text-align:none;禁用齐行 text-align:用表意文本来排齐内容 -------------