首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    年度实用技巧 | box-shadow的多重用法

    习题中按钮内陷的效果,其实是通过设置box-shadow的内阴影实现的。将内阴影的颜色设置的比按钮背景颜色深一些,就好像按钮被按下了一样。...点阵效果box-shadow 属性可以把一个或多个阴影添加到元素上。可以设置X轴和Y轴的距离,形成不同的行和列,实现点阵效果。...彩蛋效果彩蛋是一个蓝牙耳机盒,box-shadow属性不仅可以设置外阴影,也可以设置内阴影。将内阴影和外阴影结合,可以实现立体效果。...第一步:选中一个想查看代码的功能项;第二步:将查看的功能的代码进行复制;第三步:将代码粘贴到一个空档html文档中;第四步:右键操作这个新建的 html 文档,选择在浏览器中打开,刚才的功能就在页面中出来啦...总结其实最早我用box-shadow也仅仅是为容器加一下阴影。后来用的多了,开始逐渐挖掘出它的奇妙用法,感觉它就是小巧强大的代名词。

    10820

    原 基于HTML5的WebGL结合Box2

    上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎...,但同样通过3D的呈现能让人更直观的体验到碰撞效果,先上张最终例子效果图:http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin...Box2D有很多参数功能点,这里例子我们仅呈现最基础简单的要素,主要让大家理解Box2DJS引擎的基本使用,以及呈现上如何与HT for Web结合。...和GUI线程的数据序列化传递也会有负担需注意,最终的例子3D效果玩起来还是挺有趣的:http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html http://hightopo.com.../demo/box2djs/ht-box2d-demo.html

    48610

    box-sizing: border-box;box-sizing:content-box;讲解

    box-sizing: border-box;box-sizing:content-box;讲解 简介:本文讲解box-sizing: border-box;box-sizing:content-box...CSS中的 box-sizing属性定义了 user agent应该如何计算一个元素的总宽度和总高度。 这两个语法通常用于设置盒子的全局样式。...border-box 计算公式 width = border + padding + 内容的宽度 height = border + padding + 内容的高度 讲解: 对于border-box的属性...,其中的width与height属性在内容的基础之上,海包括,边框(border),内边距(padding)两个属性. content-box 计算公式: width = 内容的宽度 height =...内容的高度 讲解: 对于context-box的属性,其中的width与height只包括,所含有的内容的宽和高,不包括边框(border),外边距(margin),内边距(padding).

    13210

    基于HTML5的WebGL结合Box2DJS物理应用

    上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎...,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto...Box2D有很多参数功能点,这里例子我们仅呈现最基础简单的要素,主要让大家理解Box2DJS引擎的基本使用,以及呈现上如何与HT for Web结合。.../ht-box2d-demo.html 例子中物体掉落到-150以下我就删除了Box2DJS以及HT的DataModel中对应的数据元素,同时选中图元也会自动删除图元,count % 10 === 0...和GUI线程的数据序列化传递也会有负担需注意,最终的例子3D效果玩起来还是挺有趣的:http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html ?

    965100

    基于HTML5的WebGL结合Box2DJS物理引擎应用

    上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎...,但同样通过3D的呈现能让人更直观的体验到碰撞效果,最终例子效果: http://hightopo.com/demo/box2djs/ht-box2d-demo.html Box2D最早是Erin Catto...Box2D有很多参数功能点,这里例子我们仅呈现最基础简单的要素,主要让大家理解Box2DJS引擎的基本使用,以及呈现上如何与HT for Web结合。.../ht-box2d-demo.html 例子中物体掉落到-150以下我就删除了Box2DJS以及HT的DataModel中对应的数据元素,同时选中图元也会自动删除图元,count % 10 === 0...和GUI线程的数据序列化传递也会有负担需注意,最终的例子3D效果玩起来还是挺有趣的:http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html ?

    88420
    领券