展开

关键词

重磅来袭!原来阴影可以这样玩?

HTML5学堂:有阴影的地方,必定有光,每一个物体都会有一个阴影与它如影随形。当然在页面制作中,我们使用到的标签也是有着各种各样不同的阴影效果的,比如模块的发光、元素的背光阴影等等。 当然我们有时候会用盒阴影来代替使用,这是因为盒阴影不占物理空间,而会占据空间,导致了移动端设置自适应宽度受到了精准度的影响,那么接下来我们来看看盒阴影是怎么使用的! 2. 也可以让其出现在其中的某几个上;其二可以随时调节阴影大小,缘模糊度,阴影颜色;其三可以随时更改为内阴影,另还可以设置多个阴影效果。 实际上利用box-shadow来制作,只能说看上去像,但实质其并非,它和border还是有本质上的区别的。 第一个块的阴影被浏览器忽略不计,并不算做内容的大小,但是第二个块的被计算了大小。所以借住这个特点,我们盒阴影所模拟的是可以被自由使用的,但必须要注意其层级关系。 4.

93050

HTML-CSS基础学习

样式 border-style 复合属性 参数(all;上下左右;上下、左右;上、左右、下) 取值: -none 无 -hidden 隐藏 -dotted 点线 -dashed 虚线 -solid 实现 -double 双线 -groove 3D凹槽 -ridge 菱形 -inset 3D内嵌 -outset 3D凸 宽度 border-top-width -v-shadow 必需,垂直阴影位置,允许负值 -blur 可选,模糊距离 -spread 可选,阴影尺寸 -color 可选,阴影颜色 -inset; 可选,将部阴影改为内部阴影 图像 指定这部绘制的量 border-image-repeat 用于设置图像界的平铺方式 border-image 复合属性 border-image: source slice width overflow-y属性 指明如果溢出元素内容区域的话是否对内容的上下缘进行裁剪 overflow -visible 不裁剪内容,可能会显示这内容 -hidden 裁剪内容,不提供滚动机制 -

16430
  • 广告
    关闭

    腾讯云精选爆品盛惠抢购

    腾讯云精选爆款云服务器限时体验20元起,云数据库19.9元/年起,还有更多热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端-10款web动画插件

    今天我们给大家带来另一款基于HTML5 Canvas的飞机航班线路模拟动画,它模拟了许多航班在不同目的地的起飞降落数量。 ? 今天给大家分享另一款基于纯CSS3的开关样式的自定义单选插件,一共四种样式,都比较有创意。 ? 5.jQuery左侧栏多级菜单 适合后台管理页面使用 这是一款基于jQuery的侧栏多级下拉菜单插件,这个菜单的特点是可以固定在左侧栏,当页面滚动时整个菜单可以保持一直可见,方便操作。 类似的菜单插件还有CSS3侧栏单页切换小图标菜单和CSS3侧栏手风琴菜单,都非常实用。这种菜单非常适合在网站的后台管理页面中使用。 ? 今天给大家带来另一款模拟谷歌的纯CSS3 Loading加载动画,一共有6种动画效果。 ?

    1.5K50

    2016.04第4周 群问题分享

    input文本光标放上去怎么去除浅蓝色 2016.4.25~2016.4.29 核心概念 input标签里面各种属性的作用 参考答案 为了处理不同浏览器的不同样式(不同浏览器的input不同 (border与background的设置) 在文本获得焦点的时候,文本部会有不同的样式(根据浏览器而定),因此需要清除样式,设置outline: none; 即可。 相关知识可以在HTML5学堂官网搜索“form表单”。 相关知识可以在HTML5学堂官网搜索“form表单”。 HTML5学堂小编 - 陈林 耗时4h

    445140

    各大公司移动端页面 - 导航的实现

    ,这主要分享基本原理,没有跟各大公司移动端页面的样式一摸一样,所以仅供大家参考学习,有什么不对的欢迎大家学习交流。 1、小米——移动端实现方式 导航栏效果 ? 导航demo <! 效果分析 首先这么来实现,省了用浮动,大家都清楚,浮动会带来一系列的问题,用display: table&display: table-cell代替了浮动;另,有没有发现a标签设置了左1px,如果是浮动的话 ,还需要考虑盒模型,不然浮动不上去(不会处于同一行,如下图),表格的话很方便,设置的话,它的宽度自己适应,表格在这方面比较好。 line-height: 100px;             font-size: 14px;             text-align: center;         }         /*利用伪元素实现效果             display: flex;             width: 100%;         }         .nav a:first-child {             /*第一个左

    79670

    超级玛丽HTML5源代码学习------(一)

    Cache-Control" content="no-cache" /> <title>My first Game</title> <style type="text/css"> body { /** :无 0像素 */ border:none 0px; /** 补白:向填充0像素 */ margin:0px; /** 向内填充:向内填充0像素 距上级0像素 */ padding: 设置字体大小 16px = 1em */ font-size : 16px; background-color : #f3f3f3; } /** 画布 canvas */ canvas { /** // 取得2d绘图上下文 // context是一个封装了很多绘图功能的对象 // 获取这个对象的方法是var context =canvas.getContext("2d"); // html5 function draw28(id) { var image = new Image(); image.src = "Image/html5

    6810

    HTML5 SVG+CSS3霓虹灯文字动画特效

    37210

    HTML5移动应用开发

    1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据 在线app支持使用下载离线缓存,或者不下载离线缓存;而离线app必须是下载完离线缓存才能使用。 形象点说,cookie就是存了电话和菜单,想吃什么要叫卖,等多长时间才能吃到就得看交通情况了;离线缓存就是直接在冰箱里存了食物,想吃就能马上吃到(当然,想吃最新的食物同样可以打电话预定)。 2.专为移动平台定制的表单元素 浏览器中出现的html5表单元素与对应的键盘: 类型 用途 键盘 Text 正常输入内容 标准键盘 Tel 电话号码 数字键盘 Email 电子邮件地址文本 带有@和. 更有弹性的选择器 Webfonts – 嵌入式字体 Layout – 多样化的排版选择 Stlying radius gradient shadow – 圆角、渐变、阴影 Border background – 的背景支持

    63080

    篇: 卷积基础-图片

    了解卷积/滤波的基础知识,给图片添加。 卷积的概念其实很好理解,下面我就给大家做个最简单的解释,绝对轻松加愉快的辣o(_ ̄▽ ̄_)o 卷积 什么是二维卷积呢? 看下面一张图就一目了然: 卷积就是循环对图像跟一个核逐个元素相乘再求和得到另一副图像的操作,比如结果图中第一个元素5是怎么算的呢? 添加 cv2.copyMakeBorder()用来给图片添加,它有下面几个参数: src:要处理的原图 top, bottom, left, right:上下左右要扩展的像素数 borderType :类型,这个就是需要关注的填充方式,详情请参考:BorderTypes 其中默认方式和固定值方式最常用,我们详细说明一下: 固定值填充 顾名思义,cv2.BORDER_CONSTANT这种方式就是都填充成一个固定的值 练习 尝试给"lena.jpg"添加几种不同的类型,对比下效果。 引用 本节源码 Basic Operations on Images 图像卷积与滤波的一些知识点

    10230

    ITF条码的如何设置

    一般的ITF条码是被一个矩形包围,或者只有上下两条支承线条。下面小编就详细介绍在生成ITF条码时如何设置这个矩形。   打开条码标签软件,新建一个标签,标签的尺寸要和打印机里标签纸的尺寸保持一致。 01.png   条形码生成后,在软件右侧设置的大小,小编这里设置的是3,您可以根据自己的需要进行设置。左侧留白和右侧留白设置的是10。 03.png   以上介绍的就是在条码标签软件中生成ITF条码时设置条码的的方法,条码标签软件可以生成各种不同类型的条形码

    8020

    学习总结之HTML5剑指前端

    填充和绘制,填充为fill,绘制stroke。填充表示填满图形内部,绘制是指只绘制图形的。 设定绘图样式,主要是用于图形的颜色,但不限于图形的颜色。 第二,设定图形的样式,strokeStyle属性,图形的样式,在该属性中填入的颜色值。 指定线宽,使用图形上下文对象的lineWidth属性设置图形的宽度。 指定颜色值,填充颜色和的颜色分别通过fillStyle属性和strokeStyle属性。(rgb(红,绿,蓝)或rgba(红,绿,蓝,通明度))。 绘制矩形,使用fillRect方法和strokeRect方法来填充矩形和绘制矩形。 绘制渐变图形 绘制线性渐变 fillStyle方法可以填充颜色,还可以指定填充的对象。 渐变:指填充时从一种是颜色慢慢过渡到另一种颜色。

    25710

    学习总结之HTML5剑指前端(建议收藏,图文并茂)

    填充和绘制,填充为fill,绘制stroke。填充表示填满图形内部,绘制是指只绘制图形的。 设定绘图样式,主要是用于图形的颜色,但不限于图形的颜色。 第二,设定图形的样式,strokeStyle属性,图形的样式,在该属性中填入的颜色值。 指定线宽,使用图形上下文对象的lineWidth属性设置图形的宽度。 指定颜色值,填充颜色和的颜色分别通过fillStyle属性和strokeStyle属性。(rgb(红,绿,蓝)或rgba(红,绿,蓝,通明度))。 绘制矩形,使用fillRect方法和strokeRect方法来填充矩形和绘制矩形。 绘制渐变图形 绘制线性渐变 fillStyle方法可以填充颜色,还可以指定填充的对象。 渐变:指填充时从一种是颜色慢慢过渡到另一种颜色。

    10010

    初识HTML5和CSS3

    HTML新特性 HTML5不仅仅是HTML规范的最新版本,它也代表了一系列Web相关技术的总称,其中最重要的三项技术就是HTML5核心规范、CSS3(Cascading StyleSheet,层叠样式表的最新版本 多媒体(Multimedia):音频视频能力的增强是HTML5的最大突破! HTML5基本语法 <! (宽高、样式、距等)以及版面的布局等观显示样式。 –CSS3 是 CSS 的最新版本,该版本提供了更加丰富且实用的规范,如:列表模块、超链接、语言模块、背景和、颜色、文字特效、多栏布局、动画等等,这些规范的使用会在后面的单元中将依次讲解。

    33311

    前端面试宝典(一)

    1) HTML5有哪些新特性? HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 3) HTML5的离线储存有几种方式?请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage和localStorage。 属于同一个BFC的两个相邻Box的margin会发生叠加 • 每个元素的margin box的左, 与包含块border box的左相接触(对于从左往右的格式化,否则相反)。 当两个或多个垂直距相遇的时候,形成一个距。距的高度等于两个发生叠加的距高度中的较大者。只有普通文档流中块的垂直距才会发生距叠加。 行内、浮动或绝对定位之间的距不会叠加。 在父类标签设置overflow:hidden ? 给父级标签设置border属性即可 ?

    27630

    Form表单 问题多多(中)

    HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器兼容问题。 为了处理不同浏览器的不同样式(不同浏览器的input不同,背景也不相同),需要将文本的背景去除掉,并去除它的,将背景设置为图片。 (border与background的设置) 在文本获得焦点的时候,文本部会有不同样式(根据浏览器而定),因此需要清除样式,设置outline:none;即可。 14像素,那么height以及line-height均设置为14像素,上下各9像素内距撑开)。 注意,此处如果想取消掉聚焦后的,同样可以使用outline:none;的代码进行处理。

    62950

    CSS 基础

    ,扩展到元素界(但不包括距),如果有透明部分(如虚线),会透过这些透明部分显示出背景色 background-color 的值有一般三种设置方式:① 关键字,颜色名称的背景颜色,比如 和 ,但不包括距 background-color: red; background-image:url(); /*指向图像的路径*/ background-repeat 属性,设置是否及如何重复背景图像 盒模型 margin 简写属性在一个声明中设置所有距属性 border 简写属性在一个声明设置所有的属性 padding 简写属性在一个声明中设置所有距属性 content 属性与 : :dotted solid double dashed; //上是点状,右是实线,下是双线,左是虚线 ? thick 10px; //上是细,右是中等,下是粗,左是 10px 宽的 border 简写属性在一个声明设置所有的属性,属性设置顺序为:border-width

    52040

    CSS3实现loading图

    HTML5学堂:学习CSS3,重要的并不是那几个命令,而是如何应用CSS3的知识实现网站中的效果,换句话说,“只有想不到,没有做不到”。在这个效果当中,主要用到了圆角和动画。 HTML5学堂-刘国利在此郑重声明:本篇文章的灵感来源于2014年的自己一个学生的技术演讲,他运用CSS3实现了loading图效果,在此书写出来与大家分享。 效果创造的原作者——黄仕辉 实现的基本思路:利用圆角对loading图的样式控制,让其从方形变化为圆形;之后控制不同的粗细,调整更佳的视觉效果;最后利用CSS3中的动画,实现运动;在进行布局的时候 "wrap">

    </body> </html> 此处采用了一种很特殊的居中方法,将盒模型进行定位处理之后,上下左右均采用了0%的值,然后运用margin:auto的控制,让上下左右自动处理距值 关于的设置已经提到了,四个方向采用不同的粗细。 顺便一提,由于使用的是CSS3进行控制,因此,即便是在PC端调整窗口大小,loading图的大小也会随之发生变化。 显示效果 ?

    65440

    快速上手小程序云开发

    距属性 margin 在⼀个声明中设置所有距属性。 margin-top 设置元素的上距。 margin-right 设置元素的右距 margin-bottom 设置元素的下距。 margin-left 设置元素的左属性 border 在⼀个声明中设置所有的属性。 border-bottom 在⼀个声明中设置所有的下属性。 border-left 在⼀个声明中设置所有的左属性。 border-width 设置四条的宽度。 border-style 设置四条的样式。 内距属性 border-color 设置四条的颜⾊。 border-radius 简写属性,设置所有四个 border-*-radius 属性。 ); } Web前端开发职业技能标准串讲 初级 1 Web页面制作基础 2 HTML5和CSS3开发基础与应用 3 JavaScript程序设计 4 轻量级架开发应用 Web简介 HTML语法基础

    45750

    相关产品

    • 云托付物理服务器

      云托付物理服务器

      云托付物理服务器是将客户自有服务器托管到云机 房的裸金属产品,由腾讯云提供机架、网络、云原生及全量带外能力。使用该产品,客户在将服务器托付给腾讯云后,获取物理服务器的时间将被缩短至分钟级,同时无缝使用云上产品,可帮助客户更专注于业务能力。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券