美文网首页
CSS3边框、背景、文本效果、字体

CSS3边框、背景、文本效果、字体

作者: Xara_ | 来源:发表于2019-07-23 11:38 被阅读0次

CSS3边框

  1. 圆角边框:border-radius
div{
    border: 1px solid #000;
    border-top-left-radius: 10px;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 5%;
    border-bottom-left-radius: 5px;
}
  1. 边框阴影:box-shadow
    语法:box-shadow: h-shadow v-shadow blur spread color inset;
用法
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
div{
     box-shadow: 10px 10px 5px #888888;
}
  1. 边框图片:border-image
描述
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
div{
    -moz-border-image: url(/i/border.png) 30 30 round;  /* Old Firefox */
    -webkit-border-image: url(/i/border.png) 30 30 round;   /* Safari and Chrome */
    -o-border-image: url(/i/border.png) 30 30 round;        /* Opera */
    border-image: url(/i/border.png) 30 30 round;
}

CSS3背景

  1. background-size:
    background-size 属性规定背景图片的尺寸。
    可以以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。
div{
    background: url(bg_flower.gif);
    background-size: 63px 100px;       /*用像素规定尺寸*/
    /*background-size: 40% 100%;*/   /*用百分比规定尺寸*/
    background-repeat: no-repeat;
}
  1. background-origin:
    background-origin 属性规定背景图片的定位区域。
    背景图片可以放置于 content-box、padding-box 或 border-box 区域。


div{
    background: url(bg.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}
  1. 多重背景图片:
    CSS3 允许为元素使用多个背景图像。
div{ 
    background-image: url(bg1.gif),url(bg2.gif);
}

CSS3文本效果

  1. 文本阴影:text-shadow
    语法:text-shadow: h-shadow v-shadow blur color;
    可以规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色。
描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
h1{
    text-shadow: 5px 5px 5px #FF0000;
}

2.自动换行:word-warp
语法:word-wrap: normal | break-word;
word-wrap 属性允许长单词或 URL 地址换行到下一行。

p {
    word-wrap:break-word;
}
  1. 文本溢出省略号:text-overflow
    语法:text-overflow: clip | ellipsis | string;
描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
/*单行文本*/
div{
    border: 1px solid #000000;
    width: 100px;
    white-space: nowrap;    /*规定段落中的文本不进行换行*/
    overflow: hidden; 
    text-overflow: ellipsis;
}

/*多行文本*/
div{
    border: 1px solid #000000;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;    /*将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical;    /*设置或检索伸缩盒对象的子元素的排列方式*/
    -webkit-line-clamp: 3;    /*用来限制在一个块元素显示的文本的行数,是一个不规范的属性,没有出现在 CSS 规范草案中*/
}

CSS3字体

在 CSS3 @font-face 规则中定义“自己的”字体。
必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

相关文章

  • web前端面试提问总结:

    学过CSS3吗?CSS3的新增特性有哪些? 主要是文本效果、边框、图片、字体、背景效果、阴影效果、色彩类: RGB...

  • CSS3边框、背景、文本效果、字体

    CSS3边框 圆角边框:border-radius 边框阴影:box-shadow语法:box-shadow: h...

  • CSS3常用属性

    边框 背景 文本效果 字体描述符 (@font-face) @font-face 规则中定义的所有字体描述符: 2...

  • PPT-Lecture05-字体

    字体 1、标题字体的美化 给字体加粗、加边框、加艺术效果 “格式”->"文本效果"->"文本轮廓"、艺术字样式 2...

  • CSS-基础

    选择器样式:背景/大小样式:文本/字体 选择器 样式:背景/大小 样式:文本/字体 样式:边框 样式:内边距 样式...

  • 如何设置字体和边框的渐变色

    字体渐变色主要由背景颜色设置,设置字体颜色为透明,背景色渐变。 边框渐变色使用css3的linear-gradie...

  • CSS基础

    一.CSS语法 二.选择器 三. 尺寸,背景,文本,字体,鼠标样式 四. 表格,边框,内外边距,边框模型 边框样式...

  • 【一起来烧脑】一步学会CSS3体系

    CSS3 完全向后兼容 选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面 box-s...

  • css3新增属性

    css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局...

  • CSS3

    css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局...

网友评论

      本文标题:CSS3边框、背景、文本效果、字体

      本文链接:https://www.haomeiwen.com/subject/itanlctx.html