css边框,字体和文本不一样_css好看的边框样式

css边框,字体和文本不一样_css好看的边框样式边框的3个相关属性:①宽度(border-width):可以使用thin,medium,thick等文本值,也可以使用除百分比和负数之外的任何绝对值

css边框,字体和文本不一样_css好看的边框样式

边框的3个相关属性:

①宽度(border-width):

可以使用thin,medium,thick等文本值,也可以使用除百分比和负数之外的任何绝对值。

②样式(border-style):

有none(无边框),hidden(隐藏边框),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双线边框),

groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D凹入边框), outset(3D凸出边框)等文本值。

③颜色(border-color):可

以使用任何颜色值,包括RGB,HSL,十六进制颜色值和颜色相关的关键字。

④CSS3提供的圆角边框:

border-radius:该属性用于指定圆角边框的圆角半径。

border-top-left-radius:该属性用于指定左上角的圆角半径。

border-top-right-radius:该属性用于指定右上角的圆角半径。

border-bottom-left-radius:该属性用于指定左下角的圆角半径。

border-bottom-right-radius:该属性用于指定右下角的圆角半径。CSS3新增的box-shadow属性为盒模型添加阴影,该属性可用于整个盒模型添加阴影。

⑤box-shadow:是一个复合属性。CSS3新增的box-shadow属性为盒模型添加阴影,该属性可用于整个盒模型添加阴影。

它含有以下5个属性值。

​ hOffset: 该属性值控制阴影在水平方向的偏移。

​ vOffset: 该属性值控制阴影在垂直方向的偏移

​ blurLength: 该属性值控制阴影的模糊程度。

​ scaleLength: 该属性值控制阴影的缩放程度。

​ color: 该属性值控制阴影的颜色。

叠加外边距
垂直方向上的外边距叠加,取边距较大的值。
水平方向上的外边距是两个相邻外边距之和。

——CSS的字体和文本

字体相关属性

①color:

该属性用于控制字体颜色,该属性值包括字符类型的颜色名、十六进制的颜色值、rgb(255,255,255)值。还有CSS3提供的HSL颜色值。

②font-famliy:

设置文字的字体。因为浏览器内嵌字体的支持,该属性可以设置多个显示字体,浏览器按该属性指定的多个字体依次搜索,

以优先找到的字体来显示文字,多个属性值之间用逗号(,)隔开。

③font-size:

设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。还可以使用关键字。

例如:medium, samle, large, samller, larger等.

绝对字体大小:

使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小,它们是绝对单位,设置多大就是多少,不会受到祖先元素的字体大小影响。

相对字体大小:

使用百分比(%),em或者rem,这些单位的值是相对的,该字体的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定,比绝对字体大小的设定要复杂点。

④font-style:

设置字体的风格。属性值有:normal(正常),italic(斜体),oblique(倾斜)。

⑤font-weight:

设置字体是否加粗。属性值:lighter,normal,bold,bolder.

⑥font-variant:

设置文字的大写字符的格式。属性值:normal,small-caps(小型的大写字母字体)

⑦font: 简写。

简写规则:

规则一:必须声明font-size和font-famliy的值

规则二:声明顺序

①font-weight, font-style, font-variant 不分先后

②然后是font-size

③最后是font-famliy

文本属性

① text-decoration:

用于控制文字是否有修饰线。属性值:none,underline(下划线),line-through(中划线),overline(上划线)

②text-align:

设置文本对齐。属性值:center, left,right,justify(两端对齐)。

③text-shadow:

该属性用于设置的文字是否有阴影效果。

​ color:指定该阴影的颜色。

​ xoffset:指定阴影在横向上的偏移。

​ yoffset:指定阴影在纵向上的偏移。

​ radius:A指定阴影的模糊半径。模糊半径越大,阴影看上去越模糊。

​ 多重阴影:多加几组数据即可。

​ sytle=“text-shadow:5px 5px 2px #cf0”

④line-height:

设置文字的行高,即字体最低端与字体内部顶端之间的距离。负值的行高可以实现阴影效果。

⑤text-transform:

设置文字的大小写。属性值:none,capitalize(首字母大写),uppercase(全部大写),lowercase(全部小写)

⑥letter-spacing:

设置字符之间的间隔。

例如:10px

⑦word-spacing:设置单词之间的间隔。

color属性值用来控制字体颜色。

font-family属性设置字体样式

font-size 属性用来设置字体的大小

font-style 属性用来设置字体的风格,属性值:normal(默认值:正常),italic(斜体),oblique(倾斜)

font-weight 属性用来设置字体是否加粗。属性值:lighter,normal,bold,bolder.

font-variant设置文字的大写字符的格式.属性值:normal,small-caps(小型的大写字母字体)

text-align:设置文本对齐。属性值:center,left,right,justify(两端对齐)。

今天的文章css边框,字体和文本不一样_css好看的边框样式分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/62887.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注