当前位置:首页 > 前端技术 > 第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式

第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式

2022年09月17日 14:22:49前端技术4

css颜色和透明度,盒子阴影和轮廓,光标样式

 

 


学习要点:
1.颜色和透明度
2.盒子阴影和轮廓
3.光标样式

 

一.颜色和透明度
颜色我们之前其实已经用的很多了,比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过,字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。

 

color设置文本颜色

            属性               值                 说明                              CSS版本

            color             颜色值          设置文本前景色                    1

div > span{
    color: #1e1eff;
}

<div><span>这是一段文本</span></div>

 

opacity设置元素的透明度

           属性               值                  说明                               CSS版本

           opacity          0 ~ 1            设置元素的透明度                    3

div > span{
    background-color: #ff2b1c;
    opacity: 0.5;
}

<div><span>这是一段文本</span></div>

 

二.盒子阴影和轮廓 

 

box-shadow阴影效果

CSS3提供了一个非常实用的效果样式,就是阴影效果。通过box-shadow属性来实现样式表如下:CSS版本3

         属性              值                    说明                                                                                       

   box-shadow       hoffset                阴影的水平偏移量,是一个长度值,                                              

                                                        正值表示阴影向右偏移,负值表示阴影向左偏移。  

                         

                                voffset                     阴影的垂直偏移量,是一个长度值,正值代表阴影位于元素盒子的下方, 

                                                            负值代表阴影位于元素盒子 上方。

 

                             blur                       (可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。                           

                                                               默认值为0,边界清晰    

 

                                 spread                   (可选)指定阴影延伸半径,是一个长度值,                                                    

                                                               正值代表阴影向盒子各个方向延伸扩大,负值代表阴影沿相反方向缩小    

 

                                 color                      (可选)设置阴影的颜色,如果省略,浏览器会自行选择一个颜色                          

 

                                 inset                      (可选)将外部阴影设置为内部阴影                                                   

div{
    width: 200px;
    height: 200px;
    border: 10px solid #1dc01e;
    box-shadow: 5px 4px 10px 8px gray;
}

<div>这是一段文本</div>

实现内部阴影

box-shadow: 5px4px 10px 2px gray inset;

 

outline在边框的外围再增加一圈轮廓

CSS3还提供了轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。样式表如下: 

            属性                值                            说明                         CSS版本

       outline-color         颜色                外围轮廓的颜色                              3

      outline-offset        长度                轮廓距离元素边框边缘的偏移量          3

       outline-style           样式                轮廓样式,和border-style一致         3

       ontline-witdh       长度                轮廓宽度                                        3

          outline            简写                       <颜色> <样式> <宽度>                   3

div{
    width: 200px;
    height: 200px;
    border: 10px solid #1dc01e;
    outline: #c04725 solid 3px;
}

<div>这是一段文本</div>

 

三.光标样式
我们不但可以指定页面上的元素样式,就连光标的样式也可以指定。样式表如下:

cursor设置当前元素的光标

      属性                  值                               说明                     CSS版本

    cursor                  auto,default,none,context-men               光标样式                     1

                                u,help,pointer,progress,wait,

                                cell,crosshair,text,vertical-

                                text,alias,copy,move,no-drop,

                                not-allowed,e-resize,n-resize                                   

                                ,ne-resize,nw-resize,s-resize

                                ,se-resize,sw-resize,w-resize

                                ,ew-resize,ns-resize,nesw-res

                                ize,nwse-resize,col-resize,ro

                                w-resize,all-scroll

div{
    width: 200px;
    height: 200px;
    border: 10px solid #1dc01e;
    cursor: pointer;
}

<div>这是一段文本</div>

 

                             

                                 

作者:林贵秀
来源链接:https://www.cnblogs.com/adc8868/p/5979492.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42683.html

标签: css
分享给朋友:

“第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式” 的相关文章

Html/Css

原文地址:http://blog.csdn.net/annip/article/details/53455226 一.什么是role属性 role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

如何使用JS来改变CSS样式

如何使用JS来改变CSS样式 方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写)...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。