草庐IT

fitted-box

全部标签

html - 如何让 box-shadow 出现在 div 上方?

Here是我正在努力完成的一个例子。来自上方div的box-shadow不会出现在其下方div的顶部。据我了解,我需要设置z-index以便它出现在顶部并且仅适用于具有position:relative;的元素,但它仍然没有出现。我做错了什么?#top{width:100%;height:100px;box-shadow:3px3px3px#333;background-color:blue;}#middle{width:100%;height:200px;z-index:0;position:relative;background-color:orange;}#innerMiddle

html - 在具有子元素的 <div> 上使用 object-fit,包括 <canvas>

我有一个大小和宽度可变的外部容器。假设在这个容器内,我有一个Canvas,我希望它在保持比例而不是裁剪的同时尽可能多地增长。为此,我通常会使用object-fit:contain。现在,假设我有一个旁边放置了另一个元素的Canvas,而不仅仅是Canvas。HTML:CSS:.outerContainer{display:flex;border:0.5emsolid#444;margin-bottom:2em;object-fit:contain;}.outerContainercanvas{flex-grow:1;background:#77a;}/*Thiselementhasaf

html - 为什么 object-fit 在 flexbox 中不起作用?

我有几个列,我使用flex赋予它们相同的宽度。每个都包含img标签,我希望这些图像显示object-fit:cover大小。.container{display:flex;flex-direction:row;width:100%;}.test{flex:1;margin-right:1rem;overflow:hidden;height:400px;}img{object-fit:cover;}图像未调整大小,如thisdemo中所示.这是为什么? 最佳答案 来自specification:Theobject-fitpropert

html - 将 box-shadow 添加到 :after pseudo element

我有一个名为.testimonial-inner的div并使用:after伪元素我有一个位于其下方的箭头指向下方。我遇到的问题是给它添加一个盒子阴影,这样它们看起来就像一个自然元素。三Angular形上没有box-shadow:body{background:#eee}.testimonial-inner{background:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:30px;display:block;margin-bottom:25px;position:rela

html - Bootstrap 3 容器上的 box-shadow

我正在使用Bootstrap构建一个小网站。基本结构如下所示:.row{height:100px;background-color:green;}.container{margin-top:50px;box-shadow:0010px10pxblack;/*THISdoesnotworkasexpected*/}onetwothree查看实际效果:http://jsfiddle.net/ZDCjq/现在我希望整个网站的所有4个边都有阴影。问题是,bootstrap网格使用了负边距,这使得行与阴影重叠。有没有办法在保持所有Bootstrap功能完好无损的情况下完成此操作?编辑:预期的结果

html - IE9 上的 box-shadow 无法使用正确的 CSS 呈现,但适用于 Firefox、Chrome

我正在尝试模拟一个float模式框类型的东西,但在IE9及其框阴影实现方面遇到了问题。以下是我正在使用的可能会重复该问题的代码的摘要:Samplepage.content-holder{border-collapse:collapse;}.back{background-color:#a8c0ff;padding:100px;}.inner{background-color:#fff;text-align:center;padding:50px;box-shadow:0px0px20px#000;}HeadingSometexthereMoretextAbutton它在Firefox/

objective-c - 边框不适应 Aspect Fit?

我正在以编程方式设置带边框的ImageView。我将imageView的内容模式设置为AspectFit,这有效,但边框仍然是原来的正方形。代码:CGRectimageViewRect=CGRectMake(left,top,158,119);UIImageView*imageView=[[UIImageViewalloc]initWithFrame:imageViewRect];[imageViewsetContentMode:UIViewContentModeScaleAspectFit];[imageViewsetImage:image];[imageView.layersetB

iphone - "Blue box"显示在 iOS 应用程序中的自定义 UIButton 旁边

我正在开发一个iPhone应用程序,它可以充当开关灯泡的Remote,我正在使用UIButtons来执行此操作:UIButton*button=[UIButtonbuttonWithType:UIButtonTypeRoundedRect];[buttonaddTarget:selfaction:@selector(buttonPressed:)forControlEvents:UIControlEventTouchDown];[buttonsetBackgroundImage:bulb_onforState:UIControlStateSelected];[buttonsetBack

ios - 使用 drawInRect 时 UIImage Aspect Fit?

UIView提供“纵横比”内容模式。但是,我已经对UIView进行了子类化,并且想使用drawInRect绘制一个UIImage并进行纵横比调整。有没有什么方法可以让我在不使用UIImageView的情况下访问该功能? 最佳答案 这方面的数学有点复杂,但幸运的是,这是我之前准备的解决方案:-(UIImage*)imageScaledToSize:(CGSize)size{//createdrawingcontextUIGraphicsBeginImageContextWithOptions(size,NO,0.0f);//draw[

ios - iPhone iOS 无法正确显示 box-shadow

设计响应式设计中的联系表单的输入字段带有内嵌阴影和常规外阴影。请参见下图。代码input{background:#fff;height:auto;padding:8px8px7px;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border:#fffsolid3px;border-radius:4px;box-shadow:0px0px5pxrgba(0,0,0,.25),inset2px2px3pxrgba(0,0,0,.2);}问题iOSv4+无法正