border函数及相关属性,文本修饰

511 阅读2分钟

前面介绍了css的两个基础函数,字体样式和颜色,今天将会说一个border函数和cursor函数,border函数是容器装饰品(我的理解,主要是盒子的一些边框)。

border函数是一个具有复合属性值的函数,代码及功能如下:

border{
    border:1px solid red;  <!--三个属性值-->
    border-left:10px solid red;
    border-right-width:10px;    <!--一个属性值-->
    bordr-left-style:;
    border-left-color:;
}

第一行表示border函数的复合形式,可以同时控制每个边框的属性,其中第一个属性值是盒子边框的宽窄大小,第二个是边框的样式,有实边框和虚边框,这里的属性值可以自行查阅,链接见www.css88.com,第三个是边框颜色,颜色可以通过英语单词进行控制; 第二行表示border函数的变形式,可以通过这个方法控制每个单独不同边框的属性,属性值的作用和第一行的属性值一样;第三行表示把border函数里面的三个属性拿出来单独使用,作用一样,四五行是三个属性值的样式,width,style,color; 同时,color里面有一个特别的颜色,透明色,transparent,可以制作三角形(利用边框的斜角线);

容器(div或者span)里面的文本内容对齐方式要利用text-align:

text-align:center;     <!--居中对齐-->

行文本所占高度

line-height:1 em;      <!--这里的单位是em,表示16px-->

首行缩进字符

text-indent:2 em;       <!--这是首行缩进两个字符-->

划线属性(相当于<del>标签)

text-decoration:line-through;

效果如下

效果图
line-through是中划线,还有下划线,上划线,underline,overline; 注意:要使单行文本在容器内上下左右居中对齐,只需将单行文本高度设为容器高度即可。例如淘宝中的搜索框里面的“搜索”二字

cursor函数,作用是鼠标移动到目的作用区域时,鼠标将会变成一个特定样子:

cursor:pointer;

其中cursor的函数值参考www.css88.com,函数值不同,鼠标也会变成不同的样子。

我觉得border函数主要是要学会灵活改变利用,不能只是记忆它的函数值,所以下去之后还是要多加练习,扩大你的脑洞,上机敲一敲,大家继续加油哈!