Не работает border radius qt designer

QDialog with rounded corners have black corners instead of being translucent

I need to create a QDialog with rounded translucent corners. The problem is when doing so, the corners are translucent, but are somehow filled in by the Window’s alpha property making it black (which is my understanding of the cause of the problem)

Clearly visible is the rounded edges, but with a black ‘background’ of sorts. To confirm, this Dialog is a modal dialog launched by a QThread from QMainWindow . It is not the parent window.

The CSS for the QDialog (root) component is:

with a Component Layout as shown below

I added a drop shadow effect on the QDialog too. This is the constructor code for the QDialog :

Notably, the parent QMainWindow has the following attributes set in its constructor

How do I make this QDialog to have rounded translucent corners?

1 Answer 1

UPDATE: Here is a much better version. The pixelated corners were bugging me, among other things. This one looks smooth as silk and can be styled with either CSS or C++. It does require subclassing the QWidget to be rounded (unlike the first version), but it’s worth it. Again I’m using a QMessageBox as the base widget here for simplicity (no layouts/etc), but it would work with any QWidget (may need a Qt::Dialog window flag added).

The message box implementation:

Example usage showing both CSS and C++ styling options:

ORIGINAL: using a generic QMessageBox and setting a mask on it.

Turned out I could use a simple frameless dialog for an «about» message box in a new app. so here you go. This is the simplest method I can think of w/out re-implementing the widget painting process altogether (like in the Qt clock example). But there’s clearly limits to this implementation, and I haven’t tried it on a Mac yet.

Also, the drop shadow came in very handy. although you can’t actually see it, it does a great job smoothing out the corners. Great idea, even if that wasn’t the original intention. 🙂

Источник

border-radius not working

I’m working on a basic div and for some peculiar reason, border-radius: 7px isn’t applying to it.

12 Answers 12

To whomever may have this issue. My problem was border-collapse. It was set to:

and it fixed the issue.

When I set border collapse to separate it REMOVED ALL BORDERS from all

elements.

For anyone who comes across this issue in the future, I had to add

to the element that I was applying the border radius to. Final working code:

If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div’s overflow can give the impression that the border-radius isn’t working.

Im just highlighting part of @Ethan May answer which is

It would most probably do the work for your case.

For some reason your padding: 7px setting is nullifying the border-radius. Change it to padding: 0px 7px

in your div css

Try add !important to your css. Its working for me.

if you have parent element than your parent element must have overflow: hidden; property because if your children content is getting oveflowed from parent border than your border will be visible .otherwise your borderradius is working but it is hide by your children content.

Your problem is unrelated to how you have set border-radius . Fire up Chrome and hit Ctrl+Shift+j and inspect the element. Uncheck width and the border will have curved corners.

Now I am using the browser kit like this:

you may include bootstrap to your html file and you put it under the style file so if you do that bootstrap file will override the style file briefly like this

the right way is this

For my case, I have a dropdown list in my div container, so I can not use overflow: hidden or my dropdown list will be hidden.

Inspired by this discussion: https://twitter.com/siddharthkp/status/1094821277452234752 I use border-bottom-left-radius and border-bottom-right-radius in the child element to fix this issue.

make sure you add it the correct value for each child separately

Not the answer you’re looking for? Browse other questions tagged css border or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Кроссплатформенное приложение на Qt: Таблицы стилей

Сегодня я хотел бы рассмотреть вопрос кастомизации интерфейса программ на Qt. Основным вариантом является использование Qt Style Sheets. Как становится очевидно из названия, это немного специфичный аналог привычных всем каскадных таблиц стилей (CSS2), без которых немыслим современный интернет. QSS чаще всего применяются для двух вещей: либо доточить какой-нибудь виджет до более родного вида, либо наоборот, сделать интерфейс более нарядным, выделяющимся, возможно одинаковым на всех платформах.

Основы

Я категорически рекомендую пользоваться системой ресурсов Qt, которая позволяет не заморачиваться и вкомпилировать картинки и файлы стилей прямо в бинарник.

Итак, создаем файл стилей, применяем его глобально к приложению:

Есть отличный перевод официальной документации по синтаксису таблиц стилей, так что замечу лишь, что чаще других используется три способа описания виджетов, к которым будет применен стиль (селекторы):

Обращение по классу, например такое правило будет применено ко всем кнопкам вашего приложения, цвет фона будет изменен на красный:

Обращение по имени, тогда это правило будет применено только к тем кнопкам, которые имеют имя «okButton»:
Причем если на одной и той же форме есть несколько элементов, к которым нужно применить одинаковый стиль, можно воспользоваться методом setObjectName:
Обращение по иерархии виджетов на форме, тогда правило будет применено только к тем кнопкам, которые лежат внутри рамки с именем «mainFrame»:

Отдельно нужно сказать о задании стилей для подэлементов и псевдо-состояний:

Псевдо-состояния указываются в конце селектора, отделяются двоеточием (:). Например, следующее правило применяется, когда мышь находится над QPushButton:

Сложные виджеты содержат в себе подэлементы, потому для изменения оформления можно получить доступ к каждому из них, для этого используется оператор «::». Например, мы хотим изменить/убрать стрелочку, показывающую, что кнопке назначено меню, в таком случае правило будет выглядеть следующим образом:

К сожалению, чтобы описать все возможности потребуется полнокровный учебник по CSS, потому переходим к примерам.

Кнопки сегментные

У меня две новости: одна хорошая, а другая не очень. Печаль в том, что QSS не поддерживает отрисовку теней. Совсем. Потому если сделать обычное состояние сегментных кнопок в общем-то не сложно, то нажатое… в общем только картинки.
Вот стили, ответственные за это безобразие:

Состояние :pressed нужно указывать для того, чтобы не было лага при его прохождении.

OS X bug: Если не выставить кнопкам свойство flat, они будут налезать друг на друга.

Кнопки обыкновенные

Мне известны только два варианта отображения нажатого состояния без использования теней — отразить градиент и обратить цвета. Рассмотрим второй вариант:

Таблицы

Кастомизация таблиц сделана весьма добротно, отдельно задаются стили для шапки, отдельно для самой таблицы. Есть возможность задать стили для определенных колонок (секций) шапки через подэлемент ::section. Для этого реализованы псевдо-состояния :first, :last, :only-one, :next-selected, :previous-selected, :selected, :horizontal, :vertical и :checked.

Скроллбары

Основными настраиваемыми элементами являются две стрелочки по краям и хэндл, за который, собственно можно ухватить мышкой:

На OS X начиная с 10.9 используются волшебные исчезающие скроллбары, Qt их поддерживает, так что переопределять не стоит.
Со скроллбарами связан кроссплатформенный баг, из-за которого нижний/правый край скроллбара отрисовывается поверх объекта скроллинга, если тот имеет обводку через QSS.

Источник

Блог Vaden Pro

Особенности работы свойства border-radius

В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.

С выходом новой версии CSS3 решилась одна из самых сложных проблем в веб-дизайне. В новой версии продукта появилось новое свойство border-radius, с помощью которого можно легко округлять углы блока там, где это необходимо. Теперь верстальщики могут забыть о трудоемких процессах реализации такого простого решения, как скругление углов через тот же photoshop.

Однако, как оказалось, не все браузеры были готовы к выходу новинки от CSS3. Некоторые из них не совсем корректно обрабатывают скругление, на лицо недоработки и промахи.

Проблемы с webkit-браузерами

Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome:

Глядя на картинку в первую очередь можно отметить, что Firefox более плавно обрабатывает скругление, Chrome отрисовывает слегка угловатый полукруг. Также мы видим, что у хрома установленная рамка в некоторых местах просвечивается и видно заливку заднего фона.

Ввиду этого необходимо расставить приоритеты при создании сайта. Либо следует отдать предпочтение простоте кода и быстрой загрузке веб страницы, что реализуется в случае использования border-radius, либо делаем уклон на красоту и аккуратность, что легко достигается при использовании бекграундных картинок.

Стоит обратить внимание на то, что такие проблемы имеют место в старых версиях браузеров. В последних версиях такой недочет исправлен.

Проблемы скруглений изображения

В браузерах в той же степени могут возникнуть проблемы с применением свойства скругления углов как непосредственно к самой картинке, так и к ее родителю. Чтобы было понятно, привожу пример кода:

Ожидали увидеть скругленную картинку с красной рамкой, а видим

Однако, аналогично прошлому случаю, этой проблемой болеет поколение браузеров, которые постарше. Их потомки справляются отлично с таким кодом и свойство срабатывает как надо.

Выход из ситуации

Первое, что приходит в голову для того, чтобы решить эту проблему – это применить скругление углов не только для родителя, но и непосредственно к самой картинке. Причем, многие верстальщики поддерживают такую идею, я не раз натыкался на такое предложение в соответствующих форумах. Итак, записываем код:

Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка.

Еще одно решение

Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет.

Итак, вот код этого решения:

Теперь убедимся, что наш способ работает, пропускаем код через браузер

В каких браузерах работает?

Стоит отметить, что выход нового свойства в CSS3 значительно облегчил работу многим программистам. Однако, некоторые браузеры технически не были готовы к такому новшеству. Это выразилось в том, что одни из них некорректно осуществляли скругления, а другие не могли синхронизировать эффект между родителями и потомками. Но несмотря на это, с выходом новых версий браузеров постепенно разработчики исправили все свои недочеты, за что им отдельно спасибо. Сейчас в работе с border-radius не возникает практически никаких проблем.

Источник

Qt Stylesheets — Border with gap at the top and bottom

In PyQt5, I have been working on stylesheets. For my tabwidget stylesheet, I would like to use the border-right attribute to set a border between the tabs, but I would like to have a gap at the bottom and top of the border, so the border does not meet the top or bottom of the tabbar, like so:

I was wandering if there is a way to set the border height in the stylesheet, or possibly set the border style to dashed and then set the length of the dashes and gaps? Any method that achieves the border with gaps is appreciated, preferably by using stylesheets. Thanks.

Here is the stylesheet I currently have for the QTabWidget:

1 Answer 1

Yes, you can by using border-image .

This answer is CSS only related, but Qt’s implementation follows the CSS specifications very well: https://stackoverflow.com/a/26858151

In short, you create a small square png image with the intended borders (in your case, you’ll need to create only the right dashed part, the size depends on the dash pattern you need.

Unfortunately, when using rounded corners Qt «cuts» away half of the border width, so you’ll see a small gap outside the border between two adjacent tabs.

I’ve created a small example of the image which will have a pattern of 6 pixels black and 5 transparent (I forgot to erase the top 2 pixels, you won’t need them):

This is how it appears when zoomed in an image editor:

After that, this is what you’ll need as a basis for your stylesheet:

The «2» in the border-image declaration is the border width within the image, the «repeat» is required to tell Qt that the border pattern has to be repeated and not stretched. Also, remember to set the width of the border too, otherwise the image won’t be shown.

And this is the result:

As you can see, the border size is only 1px, with another pixel left outside the tab. Since the issue comes from the usage of rounded corners, I’m afraid that the only solution would be to create a full border image that includes the rounded corners. I tried to play around with negative margins and css positioning, I think that it wouldn’t work as expected and might even create issues against different platforms and Qt versions.

Источник